:root {
     --bg-dark: #030a06;
     --bg-surface: #07170e;
     --bg-card: rgba(10, 28, 18, 0.85);
     --bg-card-hover: rgba(14, 38, 25, 0.95);
     --border-glow: rgba(245, 158, 11, 0.35);
     --border-subtle: rgba(16, 185, 129, 0.25);

     --emerald-500: #10B981;
     --emerald-400: #34D399;
     --emerald-300: #6EE7B7;
     --emerald-600: #059669;
     --emerald-glow: rgba(16, 185, 129, 0.4);

     --gold-500: #F59E0B;
     --gold-400: #FBBF24;
     --gold-300: #FCD34D;
     --gold-600: #D97706;
     --gold-glow: rgba(245, 158, 11, 0.4);

     --text-main: #FFFFFF;
     --text-bright: #F1F5F9;
     --text-sub: #CBD5E1;
     --text-muted-custom: #94A3B8;
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     background-color: var(--bg-dark);
     color: var(--text-bright);
     font-family: 'Plus Jakarta Sans', sans-serif;
     overflow-x: hidden;
     line-height: 1.65;
 }

 /* Container Size Expansion */
 .container,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl,
 .container-xxl {
     max-width: 1440px !important;
     padding-left: 2rem;
     padding-right: 2rem;
 }

 @media (max-width: 768px) {

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
         padding-left: 1.25rem;
         padding-right: 1.25rem;
     }
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .brand-font {
     font-family: 'Outfit', sans-serif;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: #FFFFFF;
 }

 .mono {
     font-family: 'Space Grotesk', monospace;
 }

 /* High Contrast Global Text Color Fixes */
 p,
 .lead,
 .card-text,
 .desc {
     color: var(--text-sub) !important;
     font-size: 1rem;
 }

 .text-sub {
     color: var(--text-sub) !important;
 }

 .text-bright {
     color: #FFFFFF !important;
 }

 .text-gold {
     color: var(--gold-300) !important;
 }

 .text-emerald {
     color: var(--emerald-300) !important;
 }

 /* Override Bootstrap Dim Text */
 .text-muted {
     color: var(--text-sub) !important;
 }

 .small,
 small {
     color: #94A3B8;
 }

 /* Ambient Glow & Grid Backgrounds */
 .ambient-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     pointer-events: none;
     z-index: 0;
     background:
         radial-gradient(circle at 12% 15%, rgba(16, 185, 129, 0.16) 0%, transparent 45%),
         radial-gradient(circle at 88% 12%, rgba(245, 158, 11, 0.14) 0%, transparent 40%),
         radial-gradient(circle at 50% 55%, rgba(5, 150, 105, 0.10) 0%, transparent 50%),
         radial-gradient(circle at 85% 85%, rgba(245, 158, 11, 0.12) 0%, transparent 45%);
 }

 .grid-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 44px 44px;
     pointer-events: none;
     z-index: 0;
 }

 .content-layer {
     position: relative;
     z-index: 1;
 }

 /* Gradient & Typography Helpers */
 .text-gradient-gold {
     background: linear-gradient(135deg, #FFFFFF 0%, #FDE68A 25%, #F59E0B 75%, #D97706 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .text-gradient-emerald {
     background: linear-gradient(135deg, #FFFFFF 0%, #A7F3D0 25%, #10B981 75%, #059669 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* Buttons */
.btn-gold-glow {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #000000 !important;
    font-weight: 800;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 0.85rem 2rem;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.btn-gold-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.7);
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #000000 !important;
}

.btn-emerald-outline {
    background: rgba(16, 185, 129, 0.1);
    color: #34D399 !important;
    font-weight: 700;
    border: 1px solid rgba(52, 211, 153, 0.45);
    border-radius: 8px;
    padding: 0.85rem 2rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    backdrop-filter: blur(8px);
    text-decoration: none;
    cursor: pointer;
}

 .btn-emerald-outline:hover {
     background: rgba(16, 185, 129, 0.25);
     border-color: #34D399;
     color: #FFFFFF !important;
     transform: translateY(-2px);
     box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
 }

 /* Glass Cards */
 .glass-card {
     background: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: 24px;
     padding: 2.2rem;
     backdrop-filter: blur(20px);
     transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
 }

 .glass-card:hover {
     background: var(--bg-card-hover);
     border-color: var(--border-glow);
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.15);
 }

 /* Badges */
 .badge-pill-gold {
     background: rgba(245, 158, 11, 0.15);
     color: #FCD34D !important;
     border: 1px solid rgba(245, 158, 11, 0.4);
     border-radius: 100px;
     padding: 7px 18px;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .badge-pill-emerald {
     background: rgba(16, 185, 129, 0.15);
     color: #34D399 !important;
     border: 1px solid rgba(16, 185, 129, 0.4);
     border-radius: 100px;
     padding: 7px 18px;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 /* Navigation Bar */
 .navbar-custom {
     background: rgba(3, 10, 6, 0.92);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(16, 185, 129, 0.2);
     padding: 0.85rem 0;
     position: sticky;
     top: 0;
     z-index: 1000;
 }

 .navbar-custom .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .navbar-custom .navbar-brand {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     flex-shrink: 0;
 }

 .navbar-custom .brand-logo-img {
     width: 44px;
     height: 44px;
     object-fit: contain;
     filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5));
 }

 .navbar-custom .brand-text {
     font-size: 1.25rem;
     font-weight: 800;
     line-height: 1;
     color: #FFFFFF;
     white-space: nowrap;
 }

 .navbar-custom .brand-text span {
     color: var(--gold-400);
 }

 .navbar-custom .navbar-collapse {
     align-items: center;
 }

 .navbar-custom .navbar-nav {
     display: flex;
     align-items: center;
     gap: 0.25rem;
 }

 .navbar-custom .nav-link {
     color: #E2E8F0 !important;
     font-weight: 600;
     font-size: 0.92rem;
     padding: 0.5rem 0.85rem !important;
     white-space: nowrap;
     display: inline-flex;
     align-items: center;
     border-radius: 8px;
     transition: all 0.2s ease;
 }

 .navbar-custom .nav-link:hover {
     color: var(--gold-400) !important;
     background: rgba(255, 255, 255, 0.04);
 }

 .navbar-custom .btn-emerald-outline {
     padding: 0.55rem 1.3rem;
     font-size: 0.88rem;
     white-space: nowrap;
 }

 .navbar-custom .btn-gold-glow {
     padding: 0.55rem 1.4rem;
     font-size: 0.88rem;
     white-space: nowrap;
 }

 /* Hero Section */
 .hero-section {
     padding: 5.5rem 0 4.5rem;
     position: relative;
 }

 .hero-title {
     font-size: clamp(1.8rem, 5.8vw, 4rem);
     font-weight: 900;
     line-height: 1.12;
     margin-bottom: 1.6rem;
     color: #FFFFFF;
 }

 .hero-subtitle {
     font-size: 1.2rem;
     color: #E2E8F0 !important;
     max-width: 600px;
     margin-bottom: 2.2rem;
     line-height: 1.7;
 }

 .hero-visual-wrapper {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .hero-main-logo {
     width: 100%;
     max-width: 440px;
     filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 70px rgba(245, 158, 11, 0.3));
     animation: float-logo 6s ease-in-out infinite;
 }

 @keyframes float-logo {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-12px) rotate(1deg);
     }
 }

 /* Floating Widgets in Hero */
 .float-widget {
     position: absolute;
     background: rgba(8, 26, 16, 0.9);
     border: 1px solid var(--border-glow);
     backdrop-filter: blur(16px);
     padding: 0.95rem 1.35rem;
     border-radius: 18px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
     gap: 12px;
     z-index: 2;
     animation: float-widget 5s ease-in-out infinite;
 }

 .widget-payout {
     top: 6%;
     left: -4%;
     animation-delay: 0s;
 }

 .widget-platform {
     bottom: 6%;
     right: -4%;
     animation-delay: 2.5s;
 }

 @keyframes float-widget {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 /* Stats Strip */
 .stats-bar {
     background: rgba(8, 26, 16, 0.75);
     border-top: 1px solid var(--border-subtle);
     border-bottom: 1px solid var(--border-subtle);
     padding: 2.8rem 0;
     backdrop-filter: blur(16px);
 }

 .stat-item {
     text-align: center;
 }

 .stat-number {
     font-size: 2.8rem;
     font-weight: 900;
     font-family: 'Outfit', sans-serif;
     margin-bottom: 0.25rem;
 }

 .stat-label {
     color: #CBD5E1 !important;
     font-size: 0.95rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 /* Earning Streams Cards */
 .stream-card {
     background: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: 26px;
     padding: 2.6rem 2.2rem;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
     transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
 }

 .stream-card:hover {
     background: var(--bg-card-hover);
     border-color: var(--gold-400);
     transform: translateY(-6px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 35px rgba(245, 158, 11, 0.2);
 }

 .stream-card h4 {
     color: #FFFFFF !important;
     font-size: 1.45rem;
     font-weight: 700;
 }

 .stream-card p {
     color: #E2E8F0 !important;
     font-size: 1rem;
     line-height: 1.7;
 }

 .stream-icon {
     width: 68px;
     height: 68px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     margin-bottom: 1.6rem;
 }

 .stream-icon.gold {
     background: rgba(245, 158, 11, 0.2);
     color: var(--gold-300);
     border: 1px solid rgba(245, 158, 11, 0.4);
 }

 .stream-icon.emerald {
     background: rgba(16, 185, 129, 0.2);
     color: var(--emerald-300);
     border: 1px solid rgba(16, 185, 129, 0.4);
 }

 .stream-icon.blue {
     background: rgba(59, 130, 246, 0.2);
     color: #93C5FD;
     border: 1px solid rgba(59, 130, 246, 0.4);
 }

 /* Calculator Section */
 .calc-wrapper {
     background: linear-gradient(145deg, rgba(10, 28, 18, 0.95), rgba(4, 13, 8, 0.98));
     border: 1px solid var(--border-glow);
     border-radius: 32px;
     padding: 3.5rem;
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 60px rgba(16, 185, 129, 0.12);
 }

 @media (max-width: 768px) {
     .calc-wrapper {
         padding: 2rem 1.5rem;
     }
 }

 /* Process Bar / Custom Range Slider */
 .custom-slider {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 12px;
     background: transparent;
     cursor: pointer;
     margin: 10px 0;
     padding: 0;
     border: none;
     display: block;
 }

 .custom-slider:focus {
     outline: none;
 }

 /* Track Styling */
 .custom-slider::-webkit-slider-runnable-track {
     width: 100%;
     height: 12px;
     border-radius: 100px;
     background: #0d2618;
     border: 1px solid rgba(255, 255, 255, 0.15);
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
 }

 .custom-slider::-moz-range-track {
     width: 100%;
     height: 12px;
     border-radius: 100px;
     background: #0d2618;
     border: 1px solid rgba(255, 255, 255, 0.15);
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
 }

 /* Gold Track (Main Comments) */
 .slider-gold::-webkit-slider-runnable-track {
     background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 var(--fill, 20%), #0d2618 var(--fill, 20%), #0d2618 100%);
 }

 .slider-gold::-moz-range-progress {
     background: linear-gradient(90deg, #F59E0B, #FBBF24);
     border-radius: 100px;
     height: 12px;
 }

 /* Emerald Track (Replies) */
 .slider-emerald::-webkit-slider-runnable-track {
     background: linear-gradient(90deg, #059669 0%, #34D399 var(--fill, 12.5%), #0d2618 var(--fill, 12.5%), #0d2618 100%);
 }

 .slider-emerald::-moz-range-progress {
     background: linear-gradient(90deg, #059669, #34D399);
     border-radius: 100px;
     height: 12px;
 }

 /* Gold Thumb */
 .slider-gold::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FDE68A 25%, #F59E0B 80%, #B45309 100%);
     border: 3px solid #040D08;
     box-shadow: 0 0 14px rgba(245, 158, 11, 0.85), 0 3px 8px rgba(0, 0, 0, 0.6);
     margin-top: -7px;
     cursor: grab;
     transition: transform 0.15s ease, box-shadow 0.15s ease;
 }

 .slider-gold::-webkit-slider-thumb:hover {
     transform: scale(1.15);
     box-shadow: 0 0 22px rgba(245, 158, 11, 1), 0 4px 12px rgba(0, 0, 0, 0.7);
 }

 .slider-gold::-webkit-slider-thumb:active {
     cursor: grabbing;
     transform: scale(1.05);
 }

 .slider-gold::-moz-range-thumb {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FDE68A 25%, #F59E0B 80%, #B45309 100%);
     border: 3px solid #040D08;
     box-shadow: 0 0 14px rgba(245, 158, 11, 0.85), 0 3px 8px rgba(0, 0, 0, 0.6);
     cursor: grab;
     transition: transform 0.15s ease, box-shadow 0.15s ease;
 }

 /* Emerald Thumb */
 .slider-emerald::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #A7F3D0 25%, #10B981 80%, #047857 100%);
     border: 3px solid #040D08;
     box-shadow: 0 0 14px rgba(16, 185, 129, 0.85), 0 3px 8px rgba(0, 0, 0, 0.6);
     margin-top: -7px;
     cursor: grab;
     transition: transform 0.15s ease, box-shadow 0.15s ease;
 }

 .slider-emerald::-webkit-slider-thumb:hover {
     transform: scale(1.15);
     box-shadow: 0 0 22px rgba(16, 185, 129, 1), 0 4px 12px rgba(0, 0, 0, 0.7);
 }

 .slider-emerald::-webkit-slider-thumb:active {
     cursor: grabbing;
     transform: scale(1.05);
 }

 .slider-emerald::-moz-range-thumb {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #A7F3D0 25%, #10B981 80%, #047857 100%);
     border: 3px solid #040D08;
     box-shadow: 0 0 14px rgba(16, 185, 129, 0.85), 0 3px 8px rgba(0, 0, 0, 0.6);
     cursor: grab;
     transition: transform 0.15s ease, box-shadow 0.15s ease;
 }

 .calc-result-box {
     background: rgba(14, 38, 25, 0.95);
     border: 1px solid var(--border-glow);
     border-radius: 24px;
     padding: 2.5rem;
     text-align: center;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
 }

 .calc-amount-display {
     font-size: 3.8rem;
     font-weight: 900;
     color: var(--gold-400);
     font-family: 'Outfit', sans-serif;
     line-height: 1;
     margin: 0.6rem 0;
     filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.4));
 }

 /* Slab Tables */
 .table-custom {
     --bs-table-bg: transparent;
     --bs-table-color: var(--text-main);
     border-color: rgba(255, 255, 255, 0.1);
 }

 .table-custom th {
     color: var(--gold-300) !important;
     font-weight: 800;
     text-transform: uppercase;
     font-size: 0.88rem;
     letter-spacing: 0.06em;
     padding: 1.2rem;
     border-bottom: 2px solid rgba(245, 158, 11, 0.35);
 }

 .table-custom td {
     padding: 1.2rem;
     vertical-align: middle;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     color: #E2E8F0 !important;
     font-size: 1.05rem;
 }

 .table-custom tr:hover td {
     background: rgba(245, 158, 11, 0.08);
 }

 /* Steps / How It Works */
 .step-num {
     width: 54px;
     height: 54px;
     border-radius: 16px;
     background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
     color: #000000 !important;
     font-weight: 900;
     font-size: 1.4rem;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.6rem;
     box-shadow: 0 4px 18px rgba(245, 158, 11, 0.5);
 }

 /* Accordion */
 .accordion-custom .accordion-item {
     background: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: 18px !important;
     margin-bottom: 1.2rem;
     overflow: hidden;
 }

 .accordion-custom .accordion-button {
     background: transparent;
     color: #FFFFFF !important;
     font-weight: 700;
     font-size: 1.1rem;
     padding: 1.4rem 1.6rem;
     box-shadow: none;
 }

 .accordion-custom .accordion-button:not(.collapsed) {
     background: rgba(245, 158, 11, 0.08);
     color: var(--gold-300) !important;
     border-bottom: 1px solid var(--border-subtle);
 }

 .accordion-custom .accordion-button::after {
     filter: invert(1);
 }

 .accordion-custom .accordion-body {
     color: #E2E8F0 !important;
     padding: 1.6rem;
     line-height: 1.75;
     font-size: 1.02rem;
 }

 /* Final CTA Card */
 .final-cta-card {
     background:
         radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.28) 0%, transparent 50%),
         radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.28) 0%, transparent 50%),
         linear-gradient(135deg, #0a2416 0%, #041009 100%);
     border: 1px solid var(--border-glow);
     border-radius: 36px;
     padding: 5rem 2.5rem;
     text-align: center;
     position: relative;
     overflow: hidden;
     box-shadow: 0 25px 65px rgba(0, 0, 0, 0.75);
 }

 /* Footer */
 .footer-custom {
     background: #020704;
     border-top: 1px solid rgba(16, 185, 129, 0.2);
     padding: 4.5rem 0 2.5rem;
     color: #CBD5E1 !important;
     font-size: 0.98rem;
 }

 .footer-custom a {
     color: #CBD5E1 !important;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .footer-custom a:hover {
     color: var(--gold-300) !important;
 }

 .footer-custom p {
     color: #94A3B8 !important;
 }

 /* Form Controls & Inputs */
 .custom-form-group {
     margin-bottom: 1.4rem;
     position: relative;
 }

 .custom-form-group label {
     font-size: 0.88rem;
     font-weight: 700;
     color: var(--text-main);
     margin-bottom: 0.45rem;
     display: block;
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }

 .input-wrapper {
     position: relative;
     display: flex;
     align-items: center;
 }

 .input-icon-left {
     position: absolute;
     left: 16px;
     color: var(--gold-400);
     font-size: 1.05rem;
     pointer-events: none;
     z-index: 2;
 }

 .custom-input,
 .custom-select,
 .custom-textarea {
     width: 100%;
     background: rgba(6, 18, 12, 0.95);
     border: 1px solid rgba(16, 185, 129, 0.3);
     border-radius: 8px;
     color: #FFFFFF !important;
     font-size: 0.98rem;
     font-weight: 600;
     padding: 0.85rem 1.1rem 0.85rem 2.8rem;
     transition: all 0.25s ease;
     outline: none;
 }

 .custom-textarea {
     padding-left: 1.1rem;
     min-height: 110px;
     resize: vertical;
 }

 .custom-input:focus,
 .custom-select:focus,
 .custom-textarea:focus {
     background: rgba(8, 26, 16, 1);
     border-color: var(--gold-400);
     box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
     color: #FFFFFF !important;
 }

 .custom-input::placeholder,
 .custom-textarea::placeholder {
     color: #64748B;
     font-weight: 500;
 }

 .contact-info-card {
     background: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: 20px;
     padding: 1.5rem;
     display: flex;
     align-items: center;
     gap: 16px;
     transition: all 0.3s ease;
 }

 .contact-info-card:hover {
     border-color: var(--border-glow);
     transform: translateY(-2px);
     background: var(--bg-card-hover);
 }

 .contact-info-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.35rem;
     flex-shrink: 0;
 }

 /* Instruction Page Rich Styling */
 .instruction-body {
     color: #E2E8F0 !important;
     font-size: 1.05rem;
     line-height: 1.8;
 }

 .instruction-body p {
     color: #CBD5E1 !important;
     margin-bottom: 1rem;
 }

 .instruction-body ul,
 .instruction-body ol {
     padding-left: 1.4rem;
     margin-bottom: 1.25rem;
 }

 .instruction-body li {
     margin-bottom: 0.65rem;
     color: #E2E8F0 !important;
 }

 .instruction-body strong,
 .instruction-body b {
     color: #FBBF24 !important;
     font-weight: 700;
 }

 .instruction-media-card {
     background: rgba(4, 18, 12, 0.85);
     border: 1px solid var(--border-subtle);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     transition: all 0.3s ease;
 }

 .instruction-media-card:hover {
     border-color: var(--border-glow);
 }