@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

        :root {
            --brand-red: #e63946;
            --navy: #1d3557;
            --bg-light: #f8fafd;
            --white: #ffffff;
        }
        :root {
            --brand-red: #e63946;
            --navy: #1d3557;
            --bg-light: #f8fafd;
            --white: #ffffff;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
        }

        /* Header */
        .header {
            background: var(--white);
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

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

        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--navy);
            text-decoration: none;
        }

        .logo span { color: var(--brand-red); }

        .nav-link-back {
            background: var(--brand-red);
            color: white;
            padding: 10px 25px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }

        .nav-link-back:hover {
            background: #d62839;
            transform: translateY(-2px);
        }

        /* Hero & Search */
        .hero { background: var(--white); padding: 80px 0 60px; text-align: center; border-bottom: 1px solid #e2e8f0; }
        .hero h1 { font-weight: 800; font-size: 3.5rem; letter-spacing: -1px; margin-bottom: 15px; }
        .hero h1 span { color: var(--brand-red); }
        
        .search-box {
            max-width: 650px; margin: 30px auto 0; position: relative;
            box-shadow: 0 15px 35px rgba(29, 53, 87, 0.1); border-radius: 50px;
        }
        .search-box input {
            border: 2px solid #e2e8f0; border-radius: 50px; padding: 18px 30px 18px 60px;
            font-size: 1.1rem; font-weight: 600; width: 100%; transition: 0.3s;
        }
        .search-box input:focus { border-color: var(--brand-red); outline: none; box-shadow: none; }
        .search-box i { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1.2rem; }

        /* Category Navigation */
        .tab-wrapper {
            background: var(--white);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border-bottom: 1px solid #e2e8f0;
        }

        .category-tabs {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding: 5px 15px;
            scrollbar-width: none;
        }

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

        .tab-btn {
            background: #f1f5f9;
            border: 2px solid transparent;
            padding: 10px 22px;
            border-radius: 50px;
            font-weight: 600;
            color: var(--navy);
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .tab-btn.active { background: var(--brand-red); color: var(--white); box-shadow: 0 8px 15px rgba(230, 57, 70, 0.2); }

        /* Tool Grid */
        .tool-collection { display: none; padding: 60px 0; animation: slideUp 0.4s ease-out; }
        .tool-collection.active { display: block; }

        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

        .tool-card {
            background: var(--white); border-radius: 24px; padding: 30px; text-align: center; border: 1px solid #e2e8f0;
            transition: 0.3s; text-decoration: none; color: inherit; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
        }

        .tool-card:hover { border-color: var(--brand-red); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(29, 53, 87, 0.08); }

        .icon-box { width: 60px; height: 60px; background: #fdf2f2; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--brand-red); font-size: 1.8rem; }
        .tool-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
        .tool-card p { font-size: 0.9rem; color: #64748b; margin-bottom: 0; }

        /* No Results */
        #noResults {
            display: none;
            text-align: center;
            padding: 80px 20px;
        }
        #noResults i {
            font-size: 4rem;
            color: #cbd5e1;
            margin-bottom: 20px;
        }
    /*About Page Css */
            /* Hero Section */
        .about-hero-section {
            background: linear-gradient(135deg, var(--navy) 0%, #2a4a6f 100%);
            color: white;
            padding: 100px 0 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .about-hero-section::before {
            content: '';
            position: absolute;
            width: 500px;
            height: 500px;
            background: var(--brand-red);
            border-radius: 50%;
            opacity: 0.1;
            top: -200px;
            right: -200px;
        }

        .about-hero-section h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            position: relative;
        }

        .about-hero-section p {
            font-size: 1.3rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
            position: relative;
        }

        /* Stats Section */
        .stats-section {
            background: var(--white);
            margin-top: -50px;
            position: relative;
            z-index: 10;
            border-radius: 30px;
            padding: 50px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
        }

        .stat-box {
            text-align: center;
            padding: 30px;
        }

        .stat-box i {
            font-size: 3rem;
            color: var(--brand-red);
            margin-bottom: 15px;
        }

        .stat-box h3 {
            font-size: 3rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 10px;
        }

        .stat-box p {
            color: #64748b;
            font-size: 1.1rem;
        }

        /* Story Section */
        .story-section {
            padding: 100px 0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--brand-red);
            border-radius: 2px;
        }

        .story-card {
            background: var(--white);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }

        .story-card h3 {
            color: var(--brand-red);
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .story-card p {
            color: #475569;
            font-size: 1.05rem;
            line-height: 1.8;
        }

        /* Values Section */
        .values-section {
            background: var(--white);
            padding: 100px 0;
        }

        .value-box {
            text-align: center;
            padding: 40px 30px;
            background: var(--bg-light);
            border-radius: 20px;
            transition: 0.3s;
            height: 100%;
        }

        .value-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(230, 57, 70, 0.1);
        }

        .value-box .icon-circle {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--brand-red), #ff6b7a);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 2rem;
        }

        .value-box h4 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 15px;
        }

        .value-box p {
            color: #64748b;
            font-size: 1rem;
        }

        /* Team Section */
        .team-section {
            padding: 100px 0;
        }

        .team-member {
            text-align: center;
            background: var(--white);
            border-radius: 20px;
            padding: 40px 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: 0.3s;
        }

        .team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .team-avatar {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--brand-red), var(--navy));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 3rem;
            font-weight: 700;
        }

        .team-member h4 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 5px;
        }

        .team-member .role {
            color: var(--brand-red);
            font-weight: 600;
            margin-bottom: 15px;
        }

        .team-member p {
            color: #64748b;
            font-size: 0.95rem;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--brand-red) 0%, #ff6b7a 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
            border-radius: 30px;
            margin: 50px 0;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .cta-section p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.95;
        }

        .btn-cta {
            background: white;
            color: var(--brand-red);
            padding: 15px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            display: inline-block;
            transition: 0.3s;
        }

        .btn-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            color: var(--brand-red);
        }

        @media (max-width: 768px) {
            .about-hero-section h1 { font-size: 2.5rem; }
            .section-title { font-size: 2rem; }
            .stats-section { padding: 30px 20px; }
            .stat-box h3 { font-size: 2rem; }
        }
    /*Age Calculator CSS */
            .age-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .age-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .age-hero-section h1 span { color: var(--brand-red); }

        .age-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .age-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .age-input-label { font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 12px; display: block; }
        .age-premium-input {
            width: 100%; padding: 15px; border-radius: 15px; border: 2px solid #f1f5f9;
            font-size: 1.2rem; font-weight: 600; color: var(--navy); margin-bottom: 20px;
        }
        .age-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .age-calculate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.2rem; text-transform: uppercase;
        }
        .age-calculate-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .age-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .age-age-main { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .age-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 25px; }
        .age-stat-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; }
        .age-stat-label { font-size: 0.75rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; }
        .age-stat-val { font-size: 1.2rem; font-weight: 800; }

        .age-next-birthday {
            background: #fff5f5; border-radius: 15px; padding: 20px; color: var(--navy);
            margin-top: 20px; border-left: 5px solid var(--brand-red);
        }
    /*Algebra Solver Calculator CSS */ 
            .algebra-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .algebra-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .algebra-hero-section h1 span { color: var(--brand-red); }

        .algebra-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .algebra-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .algebra-equation-box {
            background: #f1f5f9; padding: 25px; border-radius: 15px;
            display: flex; align-items: center; justify-content: center; gap: 10px;
            font-size: 1.5rem; font-weight: 700; margin-bottom: 25px;
        }

        .algebra-math-input {
            width: 70px; padding: 10px; border-radius: 10px; border: 2px solid var(--navy);
            text-align: center; font-weight: 800; color: var(--brand-red);
        }

        .algebra-solve-btn {
            background: var(--brand-red); color: white; border: none; padding: 15px 40px;
            border-radius: 12px; font-weight: 800; width: 100%; transition: 0.3s;
        }
        .algebra-solve-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .algebra-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .algebra-x-value { font-size: 4.5rem; font-weight: 800; color: var(--brand-red); }

        .algebra-step-box {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 20px;
            margin-top: 20px; text-align: left; font-family: 'Courier New', Courier, monospace;
        }
    /* Angle Calculator CSS */
        .angle-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .angle-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .angle-hero-section h1 span { color: var(--brand-red); }

        .angle-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .premium-input, .premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 3px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .angle-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .angle-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .angle-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .angle-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .angle-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .angle-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .angle-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .angle-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
    /* Area Converter CSS */
            .area-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .area-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .area-hero-section h1 span { color: var(--brand-red); }

        .area-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .area-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .area-premium-input, .area-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .area-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .area-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .area-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .area-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .area-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.2rem; word-break: break-all; }
        .area-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .area-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .area-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
    /* Auto Loan Calculator CSS */
            .auto-calc-header {
            background: #fff;
            padding: 40px 0;
            text-align: center;
            border-bottom: 1px solid #edf2f7;
            margin-bottom: 40px;
        }

        .auto-calc-header h1 { font-weight: 800; color: #1d3557; }
        .auto-calc-header h1 span { color: var(--brand-red); }

        /* Premium Calculator UI */
        .auto-calc-container {
            background: white;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            padding: 40px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.05);
        }

        .auto-input-label {
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 8px;
            display: block;
            color: #64748b;
        }

        .auto-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px 15px;
            width: 100%;
            transition: 0.3s;
            outline: none;
            font-weight: 600;
        }

        .auto-premium-input:focus {
            border-color: var(--brand-red);
            box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1);
        }

        /* Result Cards - Heavy Look */
        .auto-result-panel {
            background: #1d3557;
            border-radius: 24px;
            padding: 30px;
            color: white;
            height: 100%;
        }

        .auto-res-box {
            margin-bottom: 25px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding-bottom: 15px;
        }

        .auto-res-label { font-size: 0.85rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; }
        .auto-res-value { font-size: 2.2rem; font-weight: 800; color: var(--brand-red); }

        .auto-btn-calculate {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 12px;
            width: 100%;
            font-weight: 800;
            text-transform: uppercase;
            margin-top: 20px;
            transition: 0.3s;
        }

        .auto-btn-calculate:hover {
            transform: scale(1.02);
            background: #c12e39;
        }

        /* Comparison Badges */
        .term-badge {
            background: #f1f5f9;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            border: 2px solid transparent;
            cursor: pointer;
            transition: 0.3s;
        }

        .term-badge.active {
            border-color: var(--brand-red);
            background: rgba(230, 57, 70, 0.05);
        }
    /* BAC Calculator CSS */
            .bac-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .bac-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .bac-hero-section h1 span { color: var(--brand-red); }

        .bac-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .bac-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .bac-gender-btn-group { display: flex; gap: 10px; margin-bottom: 20px; }
        .bac-gender-btn {
            flex: 1; padding: 12px; border: 2px solid #f1f5f9; border-radius: 12px;
            background: white; font-weight: 600; cursor: pointer; transition: 0.3s;
        }
        .bac-gender-btn.bac-active { border-color: var(--brand-red); background: #fff5f5; color: var(--brand-red); }

        .bac-input-group-custom { margin-bottom: 20px; }
        .bac-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .bac-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .bac-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .bac-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .bac-value { font-size: 4rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .bac-status-badge {
            padding: 10px 20px; border-radius: 50px; font-weight: 700; text-transform: uppercase;
            display: inline-block; margin-top: 15px;
        }
        .bac-bg-safe { background: #2ecc71; color: white; }
        .bac-bg-danger { background: var(--brand-red); color: white; }
    /* Basic Calculator CSS */
            .basci-calc-header {
            background: #fff;
            padding: 40px 0;
            text-align: center;
            border-bottom: 1px solid #edf2f7;
            margin-bottom: 40px;
        }

        .basci-calc-header h1 { font-weight: 800; color: #1d3557; }
        .basci-calc-header h1 span { color: var(--brand-red); }

        /* Professional Calculator UI */
        .basci-calc-wrapper {
            background: white;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            padding: 25px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.05);
            max-width: 380px;
            margin: 0 auto;
        }

        .basci-screen {
            background: #f1f5f9;
            border-radius: 16px;
            padding: 20px;
            text-align: right;
            margin-bottom: 20px;
            border: 2px solid #e2e8f0;
        }

        #expression { font-size: 0.85rem; color: #64748b; min-height: 20px; font-weight: 600; }
        #result { font-size: 2.2rem; font-weight: 800; color: var(--navy); overflow: hidden; }

        /* Buttons Grid */
        .basci-buttons-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .basci-btn-tool {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 15px;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--navy);
            transition: 0.2s;
        }

        .basci-btn-tool:hover {
            background: #f8f9fa;
            border-color: var(--brand-red);
            color: var(--brand-red);
            transform: translateY(-2px);
        }

        /* Red Theme Buttons */
        .basci-btn-red { background: var(--brand-red); color: white; border: none; }
        .basci-btn-red:hover { background: #c12e39; color: white; }
        
        /* Operator Style */
        .basci-btn-op { color: var(--brand-red); background: #fff5f5; border-color: #fee2e2; }
        .basci-btn-eq { grid-column: span 2; background: #1d3557; color: white; border: none; }
        .basci-btn-eq:hover { background: #0f1c2e; color: white; }

        /* History Panel */
        .basci-history-section {
            margin-top: 20px;
            border-top: 1px solid #f1f5f9;
            padding-top: 15px;
        }
        .basci-history-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; font-weight: 800; margin-bottom: 8px; }
        .basci-history-list { font-size: 0.8rem; color: #64748b; }
    /* Bill Splitter Calculator CSS */
            /* Hero Section */
        .bill-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .bill-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .bill-hero-section h1 span { color: var(--brand-red); }

        /* Main Card */
        .bill-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .bill-input-label { font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .bill-premium-input {
            width: 100%; padding: 12px 15px; border-radius: 12px; border: 2px solid rgb(121, 108, 108);
            font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 20px;
            transition: 0.3s;
        }
        .bill-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .bill-split-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.2rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .bill-split-btn:hover { background: var(--navy); transform: translateY(-3px); }

        /* Result Panel */
        .bill-result-panel {
            background: var(--navy); border-radius: 25px; padding: 40px; color: white;
            text-align: center; margin-top: 30px; border-bottom: 8px solid var(--brand-red);
            display: none;
        }
        .bill-split-val { font-size: 4rem; font-weight: 800; color: white; line-height: 1; margin: 10px 0; }
        
        .bill-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; }
        .bill-detail-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; }
        .bill-detail-label { font-size: 0.75rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; }
        .bill-detail-val { font-size: 1.2rem; font-weight: 800; }

        /* Binary to Decimal Calculator */ 
                .binary-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .binary-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .binary-hero-section h1 span { color: var(--brand-red); }

        .binary-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .binary-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .binary-input-label { font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .binary-premium-input {
            width: 100%; padding: 18px; border-radius: 15px; border: 2px solid #f1f5f9;
            font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: 5px; text-align: center;
        }
        .binary-premium-input:focus { border-color: var(--brand-red); outline: none; box-shadow: 0 0 15px rgba(230, 57, 70, 0.1); }

        .binary-convert-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; margin-top: 25px;
            transition: 0.3s; font-size: 1.2rem; text-transform: uppercase;
        }
        .binary-convert-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .binary-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); transition: 0.5s;
        }
        .binary-decimal-value { font-size: 5rem; font-weight: 800; color: var(--brand-red); line-height: 1; margin: 10px 0; }

        .binary-binary-steps {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 20px;
            margin-top: 20px; text-align: left; font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;
        }
        /* BMI Calculator CSS */
                .bmi-calc-header {
            background: #fff;
            padding: 40px 0;
            text-align: center;
            border-bottom: 1px solid #edf2f7;
            margin-bottom: 40px;
        }

        .bmi-calc-header h1 { font-weight: 800; color: #1d3557; }
        .bmi-calc-header h1 span { color: var(--brand-red); }

        /* Premium Card UI */
        .bmi-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 30px;
            box-shadow: 0 15px 45px rgba(29, 53, 87, 0.05);
            margin-bottom: 30px;
        }

        .bmi-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .bmi-unit-toggle {
            display: flex;
            background: #f1f5f9;
            padding: 5px;
            border-radius: 12px;
            margin-bottom: 25px;
        }
        .bmi-unit-btn {
            flex: 1;
            padding: 10px;
            border-radius: 10px;
            border: none;
            font-weight: 700;
            transition: 0.3s;
            background: transparent;
            color: #64748b;
        }
        .bmi-unit-btn.bmi-active { background: white; color: var(--brand-red); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

        /* Inputs & Sliders */
        .bmi-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            outline: none;
            font-weight: 600;
            transition: 0.3s;
        }
        .bmi-premium-input:focus { border-color: var(--brand-red); }
        input[type=range] { accent-color: var(--brand-red); }

        /* Result Panel */
        .bmi-result-panel {
            background: #1d3557;
            border-radius: 25px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .bmi-value { font-size: 4.5rem; font-weight: 800; line-height: 1; margin: 15px 0; color: white; }
        .bmi-status { 
            display: inline-block;
            padding: 8px 20px;
            border-radius: 50px;
            background: var(--brand-red);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }

        /* Gauge Area */
        .bmi-meter {
            height: 10px;
            background: linear-gradient(to right, #3498db, #2ecc71, #f1c40f, #e67e22, #e74c3c);
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
        }
        .bmi-meter-pointer {
            width: 4px;
            height: 25px;
            background: white;
            position: absolute;
            top: -7px;
            transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

        .bmi-tips-card {
            background: #fff;
            border-radius: 20px;
            padding: 25px;
            border: 1px dashed var(--brand-red);
            margin-top: 20px;
        }
        .bmi-tips-list li { margin-bottom: 10px; font-size: 0.95rem; color: #475569; }
        /* BMR Calculator CSS */ 
                .bmr-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .bmr-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .bmr-hero-section h1 span { color: var(--brand-red); }

        .bmr-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .bmr-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .gender-btn-group { display: flex; gap: 10px; margin-bottom: 20px; }
        .gender-btn {
            flex: 1; padding: 12px; border: 2px solid #f1f5f9; border-radius: 12px;
            background: white; font-weight: 600; cursor: pointer; transition: 0.3s;
        }
        .gender-btn.active { border-color: var(--fitness-orange); background: #fff1f0; color: var(--fitness-orange); }

        .bmr-input-group-custom { margin-bottom: 20px; }
        .bmr-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .bmr-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .bmr-premium-input:focus { border-color: var(--fitness-orange); outline: none; }

        .bmr-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
            text-align: center; border-bottom: 8px solid var(--fitness-orange);
        }
        .bmr-value { font-size: 4rem; font-weight: 800; color: var(--brand-red); margin: 10px 0; }
        
        .bmr-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        /* Body Fat Calculator CSS */ 
                /* Hero Section - Pure White as requested */
        .body-hero-section {
            background: #ffffff;
            padding: 60px 0;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .body-hero-section h1 { font-weight: 800; font-size: 2.8rem; color: var(--navy); margin-bottom: 10px; }
        .body-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Card */
        .body-premium-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(29, 53, 87, 0.05);
            margin-top: 40px; /* Overlap effect for premium look */
        }

        .body-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 5px; display: block; }
        .body-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 10px;
            width: 100%;
            font-weight: 600;
            margin-bottom: 15px;
            outline: none;
        }
        .body-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel */
        .body-result-panel {
            background: var(--navy);
            color: var(--bg-light);
            border-radius: 25px;
            border: 2px solid var(--brand-red);
            padding: 30px;
            text-align: center;
            height: 100%;
            margin-top: 40px; /* Overlap effect for premium look */
        }
        .body-bf-value { font-size: 4rem; font-weight: 800; color: var(--brand-red); }
        .body-bf-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: #64748b; }


        /* Content Strategy Section */
        .body-content-sec {
            padding: 60px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .body-content-sec h2 { font-weight: 700; color: var(--navy); margin-bottom: 20px; }
        .body-content-sec p { color: #64748b; line-height: 1.8; }

        .btn-gender {
            flex: 1; padding: 12px; border: 2px solid #f1f5f9; border-radius: 12px;
            background: white; font-weight: 700; transition: 0.3s;
        }
        .btn-gender.active { border-color: var(--brand-red); color: var(--brand-red); background: #fff5f5; }
        /* Blood Pressure Calculator CSS */
                .bp-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .bp-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .bp-hero-section h1 span { color: var(--brand-red); }

        .bp-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .bp-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .bp-input-group-custom { margin-bottom: 25px; }
        .bp-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .bp-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .bp-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .bp-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
            transition: 0.5s;
        }
        
        .bp-category-title { font-size: 2.2rem; font-weight: 800; margin: 15px 0; line-height: 1.2; }
        
        .bp-gauge {
            display: inline-block; width: 15px; height: 15px; border-radius: 50%;
            margin-right: 10px; background: #ccc;
        }

        .bp-indicator-box {
            background: rgba(255,255,255,0.05); padding: 20px; border-radius: 20px;
            margin-top: 20px; border: 1px solid rgba(255,255,255,0.1);
        }
        /* Break Even Point Calculator CSS*/
                .break-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .break-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .break-hero-section h1 span { color: var(--brand-red); }

        .break-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .break-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .break-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid rgba(54, 54, 54, 0.671);
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .break-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .break-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .break-bep-value { font-size: 2.5rem; font-weight: 800; color: var(--brand-red); display: block; }
        .break-bep-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }

        .break-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .break-stat-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
        .break-stat-box span { display: block; font-size: 0.75rem; opacity: 0.7; }
        .break-stat-box strong { font-size: 1.1rem; }
         /* Business Loan Calculator CSS */
                 /* Hero Section - Pure White (Like Homepage) */
        .business-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .business-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .business-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Overlap Design */
        .business-calc-container { margin-top: 10px;margin-bottom: 10px; position: relative; z-index: 10; }
        
        .business-premium-card {
            background: white;
            border-radius: 24px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .business-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .business-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .business-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel - Red Gradient Look */
        .business-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .business-res-value { font-size: 3.5rem; font-weight: 800; color: #fff; margin: 10px 0; }
        .business-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .business-stat-box {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            padding: 15px;
            margin-top: 15px;
            text-align: left;
        }


        /* Content Strategy Placeholder */
        .business-content-strategy {
            padding: 80px 0;
            background: white;
        }
        .business-content-strategy h2 { font-weight: 800; margin-bottom: 25px; color: var(--navy); }
        .business-content-strategy p { line-height: 1.8; color: #64748b; margin-bottom: 20px; }

        .business-btn-red {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .business-btn-red:hover { background: #c12e39; transform: translateY(-2px); }
        /* CAC Calculator CSS */
                .cac-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .cac-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .cac-hero-section h1 span { color: var(--brand-red); }

        .cac-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .cac-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .cac-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid rgba(100, 92, 92, 0.507);
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .cac-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .cac-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .cac-val { font-size: 3.5rem; font-weight: 800; color: var(--brand-red); display: block; line-height: 1; }
        .cac-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .cac-cost-breakdown { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin-top: 15px; }
        .cac-cost-breakdown span { font-size: 0.75rem; opacity: 0.7; display: block; }
        /* Calories Burned Calculator CSS */
                .calorie-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .calorie-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .calorie-hero-section h1 span { color: var(--brand-red); }

        .calorie-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .calorie-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .calorie-input-group-custom { margin-bottom: 25px; }
        .calorie-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .calorie-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .calorie-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .calorie-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .calorie-burn-value { font-size: 4rem; font-weight: 800; color: var(--brand-red); margin: 10px 0; }
        
        .calorie-activity-icon { font-size: 3rem; margin-bottom: 15px; color: rgba(255,255,255,0.2); }
        /* Car Loan EMI Calculator */
                /* Hero Section */
        .car-hero-section {
            background: white;
            padding: 60px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .car-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .car-hero-section h1 span { color: var(--brand-red); }

        /* Main Container */
        .car-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .car-premium-card {
            background: white;
            border-radius: 24px;
            padding: 35px;
            border: 1px solid gainsboro;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        /* Input Styling */
        .car-input-group-custom { margin-bottom: 20px; }
        .car-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .car-premium-input {
            width: 100%;
            padding: 12px 18px;
            border-radius: 12px;
            border: 2px solid #f1f5f9;
            font-weight: 600;
            font-size: 1.1rem;
            transition: 0.3s;
        }
        .car-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fffcfc; }

        /* Result Panel */
        .car-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .car-emi-value { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .car-breakdown-item {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 15px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .car-stat-label { font-size: 0.85rem; color: #cbd5e1; text-transform: uppercase; }
        .car-stat-val { font-size: 1.2rem; font-weight: 700; }

        /* Content Section */
        .car-content-sec { padding: 60px 0; background: white; margin-top: 40px; }
        /* Case Converter CSS */
                .case-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .case-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .case-hero-section h1 span { color: var(--brand-red); }

        .case-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .case-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .case-premium-textarea {
            width: 100%; height: 250px; padding: 20px; border-radius: 15px;
            border: 2px solid rgba(104, 97, 97, 0.712); font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none; margin-bottom: 20px;
        }
        .case-premium-textarea:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .case-btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
        
        .case-btn {
            background: var(--navy); color: white; border: none; padding: 12px;
            border-radius: 10px; font-weight: 700; font-size: 0.85rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .case-btn:hover { background: var(--brand-red); transform: translateY(-2px); }

        .case-copy-btn { background: #64748b; margin-top: 10px; }
        .case-clear-btn { background: #cbd5e1; color: #1e293b; }

        .case-stats-bar { display: flex; gap: 20px; font-size: 0.85rem; font-weight: 600; color: #64748b; margin-top: -10px; margin-bottom: 20px; }
        .case-stats-bar span b { color: var(--brand-red); }
        /* Cash Flow Statement Calculator CSS */
                .cash-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .cash-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .cash-hero-section h1 span { color: var(--brand-red); }

        .cash-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .cash-section-title { 
            font-size: 0.9rem; font-weight: 800; color: var(--brand-red); 
            text-transform: uppercase; margin: 20px 0 15px 0; letter-spacing: 1px;
            border-left: 4px solid var(--brand-red); padding-left: 10px;
        }

        .cash-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; }
        
        .cash-premium-input {
            width: 100%; padding: 10px; border-radius: 8px; border: 2px solid rgba(180, 180, 180, 0.705);
            font-weight: 600; color: var(--navy); margin-bottom: 12px; transition: 0.3s;
        }
        .cash-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .cash-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 30px;
        }
        .cash-flow-item { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; opacity: 0.8; }
        .cash-flow-item.cash-total { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; margin-top: 15px; font-weight: 800; font-size: 1.5rem; opacity: 1; color: #4ade80; }
        /* Character Counter Calculator */
                .character-hero-section {
            background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .character-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .character-hero-section h1 span { color: var(--brand-red); }

        .character-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .character-premium-textarea {
            width: 100%; height: 250px; padding: 20px; border-radius: 15px;
            border: 2px solid rgba(148, 134, 134, 0.712); font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none;
        }
        .character-premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        .character-stats-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 25px;
        }
        .character-stat-card {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            text-align: center; border: 1px solid gainsboro;
        }
        .character-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--brand-red); display: block; }
        .character-stat-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; opacity: 0.7; }

        .character-social-indicator {
            margin-top: 20px; padding: 15px; border-radius: 12px; background: #fff; border: 1px dashed gainsboro;
        }
        /* CLV Calculator CSS */
                .clv-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .clv-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .clv-hero-section h1 span { color: var(--brand-red); }

        .clv-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .clv-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .clv-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid rgba(128, 128, 128, 0.596);
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .clv-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .clv-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .clv-val { font-size: 3.5rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .clv-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .clv-metric-footer { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin-top: 15px; }
        /* Commission Calculator CSS */
                .commission-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .commission-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .commission-hero-section h1 span { color: var(--brand-red); }

        .commission-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .commission-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .commission-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .commission-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .commission-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px;
        }
        .commission-res-item { display: flex; justify-content: space-between; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; }
        .commission-res-item.commission-total { border-bottom: none; padding-top: 10px; font-weight: 800; font-size: 1.5rem; color: #4ade80; }
        /* Compound Interest Calculator CSS */
                .compound-hero-section {
            background: white; padding: 80px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .compound-hero-section h1 { font-weight: 800; font-size: 2.5rem;  }
        .compound-hero-section h1 span { color: var(--brand-red); }

        .compound-premium-card {
            background: white; border-radius: 30px; padding: 40px;
            box-shadow: 0 30px 60px rgba(29, 53, 87, 0.08); margin-top: 40px;
            border: 1px solid rgba(255,255,255,0.8);
        }

        .compound-input-label { font-weight: 600; font-size: 0.95rem; color: #64748b; margin-bottom: 10px; }
        .compound-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600;  transition: 0.3s; margin-bottom: 15px;
        }
        .compound-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .compound-calc-btn {
            background: var(--navy); color: white; border: none; padding: 20px;
            border-radius: 18px; font-weight: 800; width: 100%; font-size: 1.2rem;
            text-transform: uppercase; letter-spacing: 1px; transition: 0.4s;
        }
        .compound-calc-btn:hover { background: var(--brand-red); transform: translateY(-3px); }

        .compound-result-box {
            background: var(--navy); border-radius: 25px; padding: 40px; color: white;
            margin-top: 30px; text-align: center; border-bottom: 10px solid var(--brand-red);
        }
        .compound-result-val { font-size: 4rem; font-weight: 800; color: var(--brand-red); line-height: 1; }
        
        .compound-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
        .compound-stat-card { background: rgba(255,255,255,0.05); padding: 20px; border-radius: 20px; }
        /* Contact Page CSS */
                /* Hero */
        .cont-hero-section {
            background: linear-gradient(135deg, var(--navy) 0%, #2a4a6f 100%);
            color: white;
            padding: 100px 0 80px;
            text-align: center;
        }

        .cont-hero-section h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .cont-hero-section p {
            font-size: 1.3rem;
            opacity: 0.9;
        }

        /* Contact Section */
        .contact-section {
            padding: 80px 0;
        }

        .contact-form-wrapper {
            background: var(--white);
            border-radius: 30px;
            padding: 50px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
            margin-top: -100px;
            position: relative;
            z-index: 10;
        }

        .form-label {
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 10px;
        }

        .form-control, .form-select {
            border: 2px solid #e2e8f0;
            border-radius: 15px;
            padding: 15px 20px;
            font-size: 1rem;
            transition: 0.3s;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--brand-red);
            box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
            outline: none;
        }

        .cont-btn-submit {
            background: var(--brand-red);
            color: white;
            padding: 15px 50px;
            border-radius: 50px;
            border: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: 0.3s;
            cursor: pointer;
        }

        .cont-btn-submit:hover {
            background: #d62839;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(230, 57, 70, 0.3);
        }

        /* Contact Info Cards */
        .contact-info-section {
            padding: 80px 0;
            background: var(--white);
        }

        .cont-info-card {
            background: var(--bg-light);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            transition: 0.3s;
            height: 100%;
            border: 2px solid transparent;
        }

        .cont-info-card:hover {
            border-color: var(--brand-red);
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(230, 57, 70, 0.1);
        }

        .cont-info-card .cont-icon-circle {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--brand-red), #ff6b7a);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: white;
            font-size: 2rem;
        }

        .cont-info-card h4 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 15px;
        }

        .cont-info-card p {
            color: #64748b;
            font-size: 1.05rem;
            margin-bottom: 10px;
        }

        .cont-info-card a {
            color: var(--brand-red);
            text-decoration: none;
            font-weight: 600;
        }

        /* FAQ Section */
        .cont-faq-section {
            padding: 80px 0;
        }

        .cont-section-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 50px;
            text-align: center;
        }

        .cont-faq-item {
            background: var(--white);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: 0.3s;
        }

        .cont-faq-item:hover {
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        }

        .cont-faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--navy);
        }

        .cont-faq-question i {
            color: var(--brand-red);
            transition: 0.3s;
        }

        .cont-faq-answer {
            margin-top: 20px;
            color: #64748b;
            line-height: 1.8;
            display: none;
        }

        .cont-faq-item.active .cont-faq-answer {
            display: block;
        }

        .cont-faq-item.active .cont-faq-question i {
            transform: rotate(180deg);
        }

        /* Success Message */
        .cont-success-message {
            display: none;
            background: #d4edda;
            color: #155724;
            border: 2px solid #c3e6cb;
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            text-align: center;
            font-weight: 600;
        }

        .cont-success-message i {
            font-size: 2rem;
            display: block;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .cont-hero-section h1 { font-size: 2.5rem; }
            .contact-form-wrapper { padding: 30px 20px; }
        }
        /* Cooking Units Calculator CSS */
        .cooking-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .cooking-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .cooking-hero-section h1 span { color: var(--brand-red); }

        .cooking-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .cooking-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .cooking-premium-input, .cooking-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .cooking-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .cooking-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .cooking-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .cooking-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .cooking-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; }
        .cooking-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .cooking-formula-info { background: #fff1f2; border-radius: 15px; padding: 20px; margin-top: 30px; border: 1px dashed var(--brand-red); }
        /* Countdown Timer Calculator CSS */
                /* Hero Section */
        .count-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .count-hero-section h1 { font-weight: 800; font-size: 3.2rem; color: var(--navy); }
        .count-hero-section h1 span { color: var(--brand-red); }

        /* Main Card */
        .count-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro; text-align: center;
        }

        .count-input-group-custom { display: flex; gap: 10px; justify-content: center; margin-bottom: 25px; }
        .count-timer-input {
            width: 80px; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 700; font-size: 1.2rem; text-align: center; color: var(--navy);
        }
        .count-timer-input:focus { border-color: var(--brand-red); outline: none; }

        .count-btn-action {
            padding: 15px 35px; border-radius: 50px; font-weight: 800;
            text-transform: uppercase; transition: 0.3s; border: none; font-size: 1rem;
        }
        .count-btn-start { background: var(--brand-red); color: white; }
        .count-btn-reset { background: var(--navy); color: white; margin-left: 10px; }
        .count-btn-action:hover { transform: translateY(-3px); opacity: 0.9; }

        /* Timer Display */
        .count-timer-display {
            font-size: 5rem; font-weight: 800; color: var(--navy);
            margin: 30px 0; font-variant-numeric: tabular-nums;
        }

        /* Content Info */
        .count-content-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .count-content-card h5 { font-weight: 800; color: var(--navy); margin-bottom: 15px; border-left: 5px solid var(--brand-red); padding-left: 15px; }
        /* CPC Calculator CSS */
                .cpc-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .cpc-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .cpc-hero-section h1 span { color: var(--brand-red); }

        .cpc-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .cpc-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .cpc-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .cpc-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .cpc-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .cpc-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .cpc-result-panel {
            display: none; margin-top: 30px; padding: 30px; border-radius: 20px; 
            background: var(--navy); color: white; text-align: center;
            border-bottom: 8px solid var(--brand-red);
        }
        .cpc-res-val { font-size: 3rem; font-weight: 800; color: #fff; display: block; }
        .cpc-res-label { font-size: 0.9rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }

        .cpc-formula-card { background: #fff; border-radius: 15px; padding: 20px; margin-top: 30px; border: 1px dashed gainsboro; text-align: center; }
        /* CPM Calculator CSS */
                .cpm-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .cpm-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .cpm-hero-section h1 span { color: var(--brand-red); }

        .cpm-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .cpm-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .cpm-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .premium-input:focus { border-color: var(--brand-red); outline: none; }

        .cpm-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .cpm-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .cpm-result-panel {
            display: none; margin-top: 30px; padding: 30px; border-radius: 20px; 
            background: var(--navy); color: white; text-align: center;
        }
        .cpm-res-val { font-size: 2.5rem; font-weight: 800; color: #fff; display: block; }
        .cpm-res-label { font-size: 0.9rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }

        .cpm-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .cpm-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Credit Cards Payoff Calculator CSS */
                /* Hero Section - Pure White */
        .credit-hero-section {
            background: #ffffff;
            padding: 70px 0 60px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .credit-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .credit-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with Requested Padding */
        .credit-calc-container {
            padding: 40px 0; /* 40px top and bottom as requested */
            position: relative;
            z-index: 10;
        }
        
        .credit-premium-card {
            background: white;
            border-radius: 24px;
            border: 1px solid gainsboro;
            padding: 30px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
            margin-bottom: 30px;
        }

        .credit-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .credit-premium-input {
            border: 2px solid gainsboro;
            border-radius: 12px;
            padding: 10px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .credit-premium-input:focus { border-color: var(--brand-red); }

        /* Strategy Selector */
        .credit-strategy-box {
            display: flex;
            background: #f1f5f9;
            padding: 5px;
            border-radius: 15px;
            margin-bottom: 25px;
        }
        .credit-strat-btn {
            flex: 1;
            padding: 12px;
            border-radius: 12px;
            border: none;
            font-weight: 700;
            background: transparent;
            color: #64748b;
            transition: 0.3s;
        }
        .credit-strat-btn.active { background: white; color: var(--brand-red); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

        /* Results Display */
        .credit-result-card {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            text-align: center;
        }
        .credit-res-value { font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1; margin: 15px 0; }
        .credit-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }

        /* Card Row Styling */
        .credit-card-row {
            background: #f8fafc;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 5px solid var(--brand-red);
        }

        /* SEO Content Strategy */
        .credit-content-sec { padding: 80px 0; background: white; }
        .credit-content-sec h2 { font-weight: 800; color: var(--navy); margin-bottom: 25px; }
        .credit-content-sec p { line-height: 1.8; color: #64748b; }


        .credit-btn-add { background: #f1f5f9; color: var(--navy); border: none; font-weight: 700; border-radius: 10px; padding: 10px 20px; }
        .credit-btn-add:hover { background: var(--brand-red); color: white; }
        /* Crypto Profit Calculator CSS */
                .crypto-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .crypto-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .crypto-hero-section h1 span { color: var(--brand-red); }

        .crypto-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .crypto-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .crypto-input-group-custom { margin-bottom: 20px; }
        .crypto-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .crypto-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .crypto-premium-input:focus { border-color: var(--crypto-gold); outline: none; }

        .crypto-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
        }
        .crypto-profit-value { font-size: 3.5rem; font-weight: 800; margin: 10px 0; }
        .crypto-profit-plus { color: #00f5d4; }
        .crypto-profit-minus { color: var(--brand-red); }
        
        .crypto-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        /* Data Converter CSS */
                .data-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .data-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .data-hero-section h1 span { color: var(--brand-red); }

        .data-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .data-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .data-premium-input, .data-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .data-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .data-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .data-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .data-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .data-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .data-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .data-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .data-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Day Counter Calculator */
                .day-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .day-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .day-hero-section h1 span { color: var(--brand-red); }

        .day-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .day-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .day-input-label { font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 12px; display: block; }
        .day-premium-input {
            width: 100%; padding: 15px; border-radius: 15px; border: 2px solid #f1f5f9;
            font-size: 1.2rem; font-weight: 600; color: var(--navy); margin-bottom: 20px;
        }
        .day-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .day-checkbox-container { margin-bottom: 25px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .day-checkbox-container input { width: 20px; height: 20px; cursor: pointer; }

        .day-calculate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.2rem; text-transform: uppercase;
        }
        .day-calculate-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .day-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .day-days-main { font-size: 4.5rem; font-weight: 800; color: #4cc9f0; line-height: 1; margin: 10px 0; }
        
        .day-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; }
        .day-stat-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; }
        .day-stat-label { font-size: 0.75rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; }
        .day-stat-val { font-size: 1.2rem; font-weight: 800; }
        /* Density Converter */
                .density-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .density-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .density-hero-section h1 span { color: var(--brand-red); }

        .density-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .density-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .density-premium-input, .density-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .density-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .density-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .density-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .density-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .density-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .density-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .density-formula-card { background: #eef2f7; border-radius: 12px; padding: 15px; margin-top: 25px; font-size: 0.9rem; }

        /* Depreciation Calculator CSS */
                .depr-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .depr-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .depr-hero-section h1 span { color: var(--brand-red); }

        .depr-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .depr-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .depr-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .depr-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .depr-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .dep-val { font-size: 3.5rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .dep-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .depr-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .depr-stat-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
        .depr-stat-box span { display: block; font-size: 0.7rem; opacity: 0.7; }
        /* Dividend Reinvestment Calculator CSS */
                .divi-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .divi-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .divi-hero-section h1 span { color: var(--brand-red); }

        .divi-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .divi-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .divi-input-group-custom { margin-bottom: 20px; }
        .divi-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .divi-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .divi-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .divi-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
            border-bottom: 8px solid var(--brand-red);
        }
        .divi-final-val { font-size: 3.2rem; font-weight: 800; color: #4ade80; margin: 10px 0; }
        
        .divi-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        /* DPR Calculator CSS */
                .dpr-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .dpr-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .dpr-hero-section h1 span { color: var(--brand-red); }

        .dpr-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .dpr-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .dpr-input-group-custom { margin-bottom: 25px; }
        .dpr-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .dpr-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .dpr-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .dpr-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .dpr-protein-value { font-size: 4rem; font-weight: 800; color: #4ade80; margin: 10px 0; }
        
        .dpr-info-box {
            background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px;
            margin-top: 20px; font-size: 0.9rem;
        }
        /*  DTI Calculator CSS */
                .dti-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .dti-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .dti-hero-section h1 span { color: var(--brand-red); }

        .dti-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .dti-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .dti-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .dti-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .dti-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .dti-ratio-val { font-size: 3.5rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .dti-ratio-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .dti-risk-indicator {
            margin-top: 15px; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 0.9rem;
            display: inline-block; width: 100%;
        }
        .dti-risk-safe { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
        .dti-risk-warning { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
        .dti-risk-danger { background: rgba(230, 57, 70, 0.2); color: var(--brand-red); }
        /* EBIDTA Calculator CSS */
                .ebitda-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .ebitda-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .ebitda-hero-section h1 span { color: var(--brand-red); }

        .ebitda-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .ebitda-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .ebitda-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .ebitda-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .ebitda-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .ebitda-val { font-size: 3.5rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .ebitda-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .ebitda-margin-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin-top: 15px; }
        .ebitda-margin-box span { font-size: 0.75rem; opacity: 0.7; display: block; }
        /* Employee Turn Over Rate Calculator CSS */
                .employee-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .employee-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .employee-hero-section h1 span { color: var(--brand-red); }

        .employee-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .employee-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .employee-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .employee-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .employee-dashboard-res {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .rate-val { font-size: 3.5rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .rate-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .employee-avg-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin-top: 15px; }
        .employee-avg-box span { font-size: 0.75rem; opacity: 0.7; display: block; }
        /* Energy Converter CSS */
                .energy-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .energy-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .energy-hero-section h1 span { color: var(--brand-red); }

        .energy-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .energy-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .energy-premium-input, .energy-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .energy-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .energy-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .energy-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .energy-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .energy-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .energy-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
        /* Factorial Calculator CSS */
                .fact-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .fact-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .fact-hero-section h1 span { color: var(--brand-red); }

        .fact-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .fact-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .fact-input-label { font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 12px; display: block; }
        .fact-premium-input {
            width: 100%; padding: 18px; border-radius: 15px; border: 2px solid #f1f5f9;
            font-size: 1.5rem; font-weight: 700; color: var(--navy); text-align: center;
        }
        .fact-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .fact-action-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; margin-top: 20px; transition: 0.3s;
            font-size: 1.1rem; text-transform: uppercase;
        }
        .fact-action-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .fact-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
            overflow-wrap: break-word;
        }
        .fact-value { font-size: 2.5rem; font-weight: 800; color: #4cc9f0; line-height: 1.2; margin: 15px 0; }

        .fact-step-box {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 20px;
            margin-top: 20px; text-align: left; font-family: 'Courier New', Courier, monospace;
            font-size: 0.95rem; line-height: 1.6;
        }

        /* FD Factorial Calculator CSS */
                .fd-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .fd-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .fd-hero-section h1 span { color: var(--brand-red); }

        .fd-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .fd-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .fd-input-group-custom { margin-bottom: 20px; }
        .fd-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .fd-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .fd-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fffcfc; }

        .fd-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
        }
        .fd-value { font-size: 3.5rem; font-weight: 800; color: #4ade80; margin: 10px 0; }
        
        .fd-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        /* Fraction Calculator CSS */
                /* Hero Section - Pure White (Like Homepage) */
        .fraction-hero-section {
            background: #ffffff;
            padding: 70px 0 60px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
        }
        .fraction-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .fraction-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .fraction-calc-container {
            padding: 40px 0;
            position: relative;
            z-index: 10;
        }
        
        .fraction-premium-card {
            background: white;
            border-radius: 24px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .fraction-input-label { font-weight: 600; font-size: 0.85rem; color: var(--navy); margin-bottom: 5px; display: block; text-align: center; }
        
        .fraction-input {
            border: 2px solid gainsboro;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            text-align: center;
            font-weight: 700;
            font-size: 1.2rem;
            outline: none;
            transition: 0.3s;
        }
        .fraction-input:focus { border-color: var(--brand-red); }

        .fraction-line { border-bottom: 3px solid var(--navy); margin: 10px auto; width: 80%; }

        .fraction-op-selector {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--brand-red);
            border: 2px solid gainsboro;
            border-radius: 12px;
            padding: 10px;
            background: #f8fafc;
        }

        /* Result Panel */
        .fraction-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 30px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .fraction-res-box { background: rgba(255,255,255,0.1); border-radius: 15px; padding: 20px; margin-top: 15px; }
        .fraction-res-value { font-size: 2.5rem; font-weight: 800; color: #fff; }

        /* Content Strategy Section */
        .fraction-content-strategy {
            padding: 80px 0;
            background: white;
            border-top: 1px solid var(--border-color);
        }
        .fraction-content-strategy h2 { font-weight: 800; margin-bottom: 25px; color: var(--navy); }
        .fraction-content-strategy p { line-height: 1.8; color: #64748b; }
        .btn-red {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .btn-red:hover { background: #c12e39; transform: translateY(-2px); }
        /* Freelance Rate Calculator CSS */

                .freelance-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .freelance-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .freelance-hero-section h1 span { color: var(--brand-red); }

        .freelance-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .freelance-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .freelance-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .freelance-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .freelance-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .freelance-rate-val { font-size: 3.5rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .freelance-rate-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .freelance-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .freelance-stat-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
        .freelance-stat-box span { display: block; font-size: 0.7rem; opacity: 0.7; }
        .freelance-stat-box strong { font-size: 1.1rem; }
        /* Frequency Calculator CSS */
                .frequency-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .frequency-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .frequency-hero-section h1 span { color: var(--brand-red); }

        .frequency-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .frequency-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .frequency-premium-input, .frequency-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .frequency-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .frequency-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .frequency-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .frequency-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .frequency-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .frequency-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        /* Fuel Cost Calculator CSS */
                .fuel-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .fuel-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .fuel-hero-section h1 span { color: var(--brand-red); }

        .fuel-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .fuel-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .fuel-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .fuel-premium-input {
            width: 100%; padding: 12px 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
            margin-bottom: 20px;
        }
        .fuel-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .fuel-calculate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.2rem; text-transform: uppercase;
        }
        .fuel-calculate-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .fuel-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .fuel-cost-main { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; line-height: 1; margin: 10px 0; }
        
        .fuel-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; }
        .fuel-stat-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; }
        .fuel-stat-label { font-size: 0.75rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; }
        .fuel-stat-val { font-size: 1.2rem; font-weight: 800; }
        /* Fuel Economy Calculator CSS */
                .economy-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .economy-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .economy-hero-section h1 span { color: var(--brand-red); }

        .economy-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .economy-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .economy-premium-input, .economy-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .economy-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .economy-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .economy-result-item {
            background: var(--bg-light); padding: 20px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .economy-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .economy-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.4rem; }
        .economy-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .economy-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid var(--border-color); margin-top: 40px; }
        .economy-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /*  GCD Calculator CSS */
                .gcd-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .gcd-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .gcd-hero-section h1 span { color: var(--brand-red); }

        .gcd-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .gcd-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .gcd-input-group-custom { margin-bottom: 20px; }
        .gcd-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .gcd-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.2rem; color: var(--navy);
            text-align: center;
        }
        .gcd-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .gcd-calculate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; margin-top: 10px;
            transition: 0.3s; font-size: 1.2rem;
        }
        .gcd-calculate-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .gcd-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .gcd-value { font-size: 5rem; font-weight: 800; color: #4cc9f0; line-height: 1; margin: 10px 0; }

        .gcd-explanation-box {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 20px;
            margin-top: 20px; text-align: left; font-family: 'Courier New', Courier, monospace;
        }
        /* Gratuity Calculator CSS */
                .gratuity-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .gratuity-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .gratuity-hero-section h1 span { color: var(--brand-red); }

        .gratuity-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .gratuity-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .gratuity-input-group-custom { margin-bottom: 20px; }
        .gratuity-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .gratuity-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .gratuity-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fffcf0; }

        .gratuity-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .gratuity-value { font-size: 3.5rem; font-weight: 800; color: #4ade80; margin: 10px 0; }
        
        .gratuity-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        /* GST Calculator CSS */
                /* Hero Section */
        .gst-hero-section {
            background: white;
            padding: 60px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .gst-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .gst-hero-section h1 span { color: var(--brand-red); }

        /* Main Container */
        .gst-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .gst-premium-card {
            background: white;
            border-radius: 24px;
            padding: 35px;
            border: 1px solid gainsboro;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        /* Toggle Button */
        .gst-toggle {
            display: flex;
            background: #f1f5f9;
            padding: 5px;
            border-radius: 14px;
            margin-bottom: 25px;
        }
        .gst-toggle-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            background: transparent;
            color: #64748b;
        }
        .gst-toggle-btn.active {
            background: white;
            color: var(--brand-red);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        /* Slab Selection */
        .gst-slab-list { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
        .gst-slab-item {
            flex: 1;
            padding: 10px;
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            font-weight: 700;
            transition: 0.2s;
        }
        .gst-slab-item.active { border-color: var(--brand-red); background: #fffcfc; color: var(--brand-red); }

        /* Inputs */
        .gst-input-group-custom { margin-bottom: 20px; }
        .gst-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .gst-premium-input {
            width: 100%;
            padding: 12px 18px;
            border-radius: 12px;
            border: 2px solid #f1f5f9;
            font-weight: 600;
            font-size: 1.1rem;
        }
        .gst-premium-input:focus { border-color: var(--brand-red); outline: none; }

        /* Result Panel */
        .gst-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            height: 100%;
        }
        .gst-total-price { font-size: 3.2rem; font-weight: 800; color: #4ade80; margin: 10px 0; }
        
        .gst-breakdown-box {
            background: rgba(255,255,255,0.05);
            padding: 18px;
            border-radius: 15px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
        }
        /* Heart Rate Calculator CSS */
                .heart-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .heart-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .heart-hero-section h1 span { color: var(--brand-red); }

        .heart-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .heart-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .heart-input-group-custom { margin-bottom: 25px; }
        .heart-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .heart-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .heart-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .heart-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .heart-max-hr-value { font-size: 3.5rem; font-weight: 800; color: #4ade80; margin: 5px 0; }
        
        .heart-zone-card {
            background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px;
            margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
        }
        .heart-zone-label { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }
        .heart-zone-range { color: var(--bg-light); font-weight: 800; }

        .heart-beat {
            animation: beat .5s infinite alternate;
            transform-origin: center;
            color: var(--brand-red);
        }
        @keyframes beat {
            to { transform: scale(1.2); }
        }
        /* Home Loan Eligibillity Calculator CSS */
                .home-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .home-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .home-hero-section h1 span { color: var(--brand-red); }

        .home-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .home-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .home-input-group-custom { margin-bottom: 20px; }
        .home-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .home-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .home-premium-input:focus { border-color: var(--house-blue); outline: none; background: #fff; }

        .home-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
            text-align: center;
        }
        .home-eligibility-value { font-size: 3.2rem; font-weight: 800; color: #4ade80; margin: 10px 0; }
        
        .home-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        /* Hourly TO Salary Calculator CSS */
                .hourly-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .hourly-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .hourly-hero-section h1 span { color: var(--brand-red); }

        .hourly-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .hourly-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .hourly-premium-input {
            width: 100%; padding: 12px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .hourly-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .hourly-salary-breakdown {
            background: var(--bg-light); border-radius: 20px; padding: 25px; border: 1px solid gainsboro;
        }

        .hourly-breakdown-row {
            display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eef2f7;
        }
        .hourly-breakdown-row:last-child { border-bottom: none; }
        .hourly-period-name { font-weight: 600; color: #64748b; }
        .hourly-period-value { font-weight: 800; color: var(--brand-red); font-size: 1.1rem; }

        .hourly-highlight-card {
            background: var(--navy); color: white; border-radius: 15px; padding: 20px; text-align: center; margin-top: 20px;
        }
        .hourly-highlight-card small { opacity: 0.7; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; }
        .hourly-highlight-card h2 { margin: 0; font-weight: 800; color: #fff; }
        /* Hours To Minutes Calculator CSS */
                .hours-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .hours-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .hours-hero-section h1 span { color: var(--brand-red); }

        .hours-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .hours-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .hours-premium-input {
            width: 100%; padding: 18px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 800; color: var(--navy); margin-bottom: 25px; transition: 0.3s;
            font-size: 1.5rem; text-align: center;
        }
        .hours-premium-input:focus { border-color: var(--brand-red); outline: none; background-color: #fff; }

        .hours-time-results {
            display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
        }
        .hours-time-box {
            background: var(--navy); color: white; padding: 25px; border-radius: 18px;
            text-align: center; border-bottom: 6px solid var(--brand-red); transition: 0.3s;
        }
        .hours-time-box:hover { transform: translateY(-5px); }
        .hours-val { display: block; font-size: 2rem; font-weight: 800; }
        .hours-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }

        .hours-formula-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .hours-formula-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* HTML Entity Encoder Calculator CSS */
                .html-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .html-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .html-hero-section h1 span { color: var(--brand-red); }

        .html-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .html-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .html-premium-textarea {
            width: 100%; height: 180px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-size: 1.1rem; font-family: 'Courier New', monospace;
            color: var(--navy); transition: 0.3s; resize: vertical; margin-bottom: 20px;
        }
        .html-premium-textarea:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .html-btn-group-custom { display: flex; gap: 15px; margin-bottom: 20px; }
        
        .html-action-btn {
            flex: 1; background: var(--brand-red); color: white; border: none; padding: 15px;
            border-radius: 12px; font-weight: 800; text-transform: uppercase; transition: 0.3s;
        }
        .html-action-btn.secondary { background: var(--navy); }
        .html-action-btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3); }

        .html-copy-link {
            color: var(--brand-red); font-weight: 700; text-decoration: none; 
            cursor: pointer; font-size: 0.9rem; display: inline-block; margin-top: 10px;
        }

        .html-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .html-info-card h5 { font-weight: 800; color: var(--navy); border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Ideal Weight Calculator CSS */
                /* Hero Section - Pure White Background */
        .ideal-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .ideal-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .ideal-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .ideal-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .ideal-premium-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .ideal-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .ideal-premium-input {
            border: 2px solid gainsboro;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .ideal-premium-input:focus { border-color: var(--brand-red); }

        .ideal-gender-select {
            display: flex;
            background: #f1f5f9;
            padding: 5px;
            border-radius: 15px;
            margin-bottom: 25px;
        }
        .ideal-gender-btn {
            flex: 1; padding: 12px; border: none; border-radius: 12px;
            font-weight: 700; background: transparent; color: #64748b; transition: 0.3s;
        }
        .ideal-gender-btn.active { background: white; color: var(--brand-red); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

        /* Result Panel */
        .ideal-result-panel {
            background: var(--navy);
            border-radius: 25px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .ideal-ideal-value { font-size: 3.5rem; font-weight: 800; color: #fff; margin: 10px 0; }
        .ideal-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .ideal-formula-card {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            padding: 15px;
            margin-top: 15px;
            text-align: left;
            font-size: 0.9rem;
        }

        /* Content Strategy Section */
        .ideal-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .ideal-content-sec h2 { font-weight: 800; color: var(--navy); margin-bottom: 20px; }
        .ideal-content-sec p { line-height: 1.8; color: #64748b; }
        /* Inflation Calculator CSS */
                .inflation-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .inflation-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; }
        .inflation-hero-section h1 span { color: var(--brand-red); }

        .inflation-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .inflation-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .inflation-input-group-custom { margin-bottom: 20px; }
        .inflation-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .inflation-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .inflation-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .inflation-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
            border-left: 8px solid var(--brand-red);
        }
        .inflation-future-value { font-size: 3.5rem; font-weight: 800; color: var(--bg-light); margin: 10px 0; }
        
        .inflation-power-bar {
            height: 10px; background: rgba(255,255,255,0.1); border-radius: 5px; margin: 20px 0; overflow: hidden;
        }
        .inflation-power-fill { height: 100%; background: var(--brand-red); transition: 0.5s; }
        /* Instagram Engagement Rate Calculator CSS */
                .instagram-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .instagram-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .instagram-hero-section h1 span { color: var(--brand-red); }

        .instagram-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .instagram-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .instagram-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .instagram-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .instagram-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .instagram-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .instagram-result-panel {
            display: none; margin-top: 30px; padding: 35px; border-radius: 20px; 
            background: var(--navy); color: white; text-align: center;
            border-bottom: 8px solid var(--brand-red);
        }
        .instagram-res-val { font-size: 3.5rem; font-weight: 800; color: #fff; display: block; }
        .instagram-engagement-status { font-weight: 700; padding: 5px 15px; border-radius: 50px; font-size: 0.8rem; text-transform: uppercase; margin-top: 10px; display: inline-block; }

        .instagram-status-good { background: #2ecc71; color: white; }
        .instagram-status-avg { background: #f1c40f; color: #000; }
        .instagram-status-poor { background: #e74c3c; color: white; }
        /* Inventory Turnover Calculator CSS */
                .inventory-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .inventory-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .inventory-hero-section h1 span { color: var(--brand-red); }

        .inventory-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .inventory-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .inventory-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .inventory-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .inventory-dashboard-res {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px;
        }
        .inventory-ratio-val { font-size: 3rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .inventory-ratio-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }

        .inventory-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .inventory-metric-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); text-align: center; }
        .inventory-metric-box span { display: block; font-size: 0.7rem; opacity: 0.7; text-transform: uppercase; }
        .inventory-metric-box strong { font-size: 1.2rem; color: var(--white); }

        .inventory-insight-text { font-size: 0.85rem; margin-top: 15px; padding: 10px; border-radius: 8px; background: rgba(74, 222, 128, 0.1); color: #4ade80; display: none; }
        /* JSON Formatter Calculator CSS */
                .json-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .json-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .json-hero-section h1 span { color: var(--brand-red); }

        .json-premium-card {
            background: white; border-radius: 24px; padding: 30px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .json-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .json-code-area {
            width: 100%; height: 350px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-family: 'Courier New', monospace;
            font-size: 0.95rem; color: #1e293b; background: #fff; transition: 0.3s;
            resize: vertical; margin-bottom: 20px;
        }
        .json-code-area:focus { border-color: var(--brand-red); outline: none; }

        .json-btn-group-custom { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
        
        .json-action-btn {
            flex: 1; min-width: 140px; border: none; padding: 15px; border-radius: 12px; 
            font-weight: 800; text-transform: uppercase; transition: 0.3s; color: white;
        }
        .json-format-btn { background: var(--brand-red); }
        .json-minify-btn { background: var(--navy); }
        .json-copy-btn { background: #64748b; }

        .json-action-btn:hover { transform: translateY(-3px); opacity: 0.95; box-shadow: 0 10px 15px rgba(0,0,0,0.1); }

        .json-error-msg { display: none; background: #fee2e2; color: #dc2626; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; font-weight: 600; font-size: 0.85rem; }
        /* Keyword Density Checker Calaultor CSS */
                .keyword-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .keyword-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .keyword-hero-section h1 span { color: var(--brand-red); }

        .keyword-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .keyword-premium-textarea {
            width: 100%; height: 250px; padding: 20px; border-radius: 15px;
            border: 2px solid gainsboro; font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none; margin-bottom: 20px;
        }
        .keyword-premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        .keyword-analyze-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.2rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .keyword-analyze-btn:hover { background: var(--navy); transform: translateY(-3px); }

        /* Results Table */
        .keyword-result-table {
            margin-top: 30px; display: none; background: white; border-radius: 15px; overflow: hidden; border: 1px solid var(--border-color);
        }
        .keyword-table thead { background: var(--navy); color: white; }
        .keyword-table th { border: none; padding: 15px; }
        .keyword-density-bar { height: 8px; background: var(--border-color); border-radius: 10px; overflow: hidden; margin-top: 5px; }
        .keyword-density-fill { height: 100%; background: var(--brand-red); }
        /* Lap Timer Calculator CSS */
                .lap-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .lap-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .lap-hero-section h1 span { color: var(--brand-red); }

        .lap-timer-card {
            background: var(--navy); border-radius: 30px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
            box-shadow: 0 25px 50px rgba(29, 53, 87, 0.1); margin-top: 40px;
        }

        .lap-main-clock {
            font-size: 5rem; font-weight: 800; color: white;
            font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 10px;
        }

        .lap-clock {
            font-size: 1.5rem; color: var(--cyan-glow); font-weight: 600;
            margin-bottom: 30px; opacity: 0.9;
        }

        .btn-group-custom { display: flex; justify-content: center; gap: 15px; }
        
        .btn-circle {
            width: 80px; height: 80px; border-radius: 50%; border: none;
            font-weight: 800; transition: 0.3s; display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem; text-transform: uppercase;
        }

        .btn-start { background: #06d6a0; color: white; }
        .btn-lap { background: rgba(255,255,255,0.1); color: white; }
        .btn-stop { background: var(--brand-red); color: white; }
        .btn-reset { background: #ffd166; color: var(--navy); }

        .lap-table-container {
            margin-top: 30px; background: white; border-radius: 20px;
            overflow: hidden; border: 1px solid var(--border);
        }

        .table { margin-bottom: 0; }
        .table thead { background: #f1f5f9; }
        .table th { font-weight: 700; color: var(--navy); border: none; }
        .lap-row { font-weight: 600; border-bottom: 1px solid #f1f5f9; }
        .lap-id { color: var(--brand-red); font-weight: 800; }
        /* LCM Calculator CSS */
                .lcm-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .lcm-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .lcm-hero-section h1 span { color: var(--brand-red); }

        .lcm-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .lcm-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .lcm-input-group-custom { margin-bottom: 20px; }
        .lcm-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .lcm-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.2rem; color: var(--navy);
            text-align: center;
        }
        .lcm-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .lcm-calculate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; margin-top: 10px;
            transition: 0.3s; font-size: 1.2rem; text-transform: uppercase;
        }
        .lcm-calculate-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .lcm-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .lcm-value { font-size: 5rem; font-weight: 800; color: #4cc9f0; line-height: 1; margin: 10px 0; }

        .lcm-formula-box {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 20px;
            margin-top: 20px; text-align: left; font-family: 'Courier New', Courier, monospace;
        }
        /* Lean Body Mass Calculator CSS */
                /* Hero Section - Pure White */
        .lean-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .lean-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .lean-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .lean-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .lean-premium-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .lean-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .lean-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .lean-premium-input:focus { border-color: var(--brand-red); }

        .lean-gender-select {
            display: flex;
            background: #f1f5f9;
            padding: 5px;
            border-radius: 15px;
            margin-bottom: 25px;
        }
        .lean-gender-btn {
            flex: 1; padding: 12px; border: none; border-radius: 12px;
            font-weight: 700; background: transparent; color: #64748b; transition: 0.3s;
        }
        .lean-gender-btn.active { background: white; color: var(--brand-red); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

        /* Result Panel */
        .lean-result-panel {
            background: var(--navy);
            border-radius: 25px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .lean-lbm-value { font-size: 3.8rem; font-weight: 800; color: #fff; margin: 10px 0; }
        .lean-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .lean-mass-breakdown {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            text-align: left;
        }

        .lean-progress-custom {
            height: 12px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0;
        }
        .lean-progress-bar-red { background: var(--brand-red); }

        /* Content Strategy Section */
        .lean-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .lean-content-sec h2 { font-weight: 800; margin-bottom: 20px; color: var(--navy); }
        .lean-content-sec p { line-height: 1.8; color: #64748b; }


        .lean-btn-calc {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .lean-btn-calc:hover { background: #c12e39; transform: translateY(-2px); }
        /* Leap Year Calculator CSS */
                /* Hero Section */
        .leap-hero-section {
            background: white; padding: 80px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .leap-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3.2rem; letter-spacing: -1px; }
        .leap-hero-section h1 span { color: var(--brand-red); }

        /* Main Card */
        .leap-premium-card {
            background: white; border-radius: 30px; padding: 40px;
            box-shadow: 0 25px 50px rgba(29, 53, 87, 0.08); margin-top: 40px;
            border: 1px solid #f1f5f9;
        }

        .leap-input-label { font-weight: 600; font-size: 0.9rem; color: #475569; margin-bottom: 10px; display: block; }
        .leap-premium-input {
            width: 100%; padding: 18px; border-radius: 15px; border: 2px solid #f1f5f9;
            font-weight: 700; font-size: 1.3rem; transition: 0.3s; margin-bottom: 25px;
            text-align: center;
        }
        .leap-premium-input:focus { border-color: var(--navy); outline: none; background: #fff; box-shadow: 0 0 15px rgba(29, 53, 87, 0.05); }

        .leap-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 20px;
            border-radius: 18px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; letter-spacing: 1px; transition: 0.3s;
        }
        .leap-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }

        /* Result Panel */
        .leap-result-panel {
            border-radius: 25px; padding: 40px; color: white;
            margin-top: 30px; text-align: center; transition: 0.5s; display: none;
        }
        .leap-is-leap { background: var(--emerald); border-bottom: 8px solid #059669; }
        .leap-not-leap { background: var(--navy); border-bottom: 8px solid var(--brand-red); }
        
        .leap-result-icon { font-size: 4rem; margin-bottom: 15px; }
        .leap-result-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 5px; }

        /* Info Content Section */
        .leap-content-section { margin: 60px 0; }
        .leap-info-card { background: white; padding: 30px; border-radius: 20px; border: 1px solid gainsboro; height: 100%; }
        .leap-info-card h5 { font-weight: 700; color: var(--navy); margin-bottom: 15px; border-left: 4px solid var(--brand-red); padding-left: 15px; }
        /* Length Converter CSS */
                .length-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .length-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .length-hero-section h1 span { color: var(--brand-red); }

        .length-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .length-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .length-premium-input, .length-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .length-premium-input:focus { border-color: var(--brand-red); outline: none; }

        /* Results Grid */
        .length-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .length-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .length-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .length-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .length-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .length-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .length-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* List Shuffler Calculator CSS */
                /* Hero Section */
        .shuffler-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .shuffler-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .shuffler-hero-section h1 span { color: var(--brand-red); }

        /* Main Card */
        .shuffler-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .shuffler-input-label { font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 10px; display: block; }
        
        /* Textarea Styling */
        .shuffler-premium-textarea {
            width: 100%; height: 200px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-weight: 400; font-size: 1rem;
            color: var(--navy); margin-bottom: 20px; transition: 0.3s;
            resize: none;
        }
        .shuffler-premium-textarea:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .shuffler-action-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s; margin-bottom: 15px;
        }
        .shuffler-action-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .shuffler-secondary-btn {
            background: transparent; color: var(--navy); border: 2px solid var(--navy);
            padding: 12px; border-radius: 12px; font-weight: 700; width: 100%; transition: 0.3s;
        }
        .shuffler-secondary-btn:hover { background: var(--navy); color: white; }

        /* Result Area */
        .shuffler-result-panel {
            background: var(--navy); border-radius: 20px; padding: 30px; color: white;
            margin-top: 30px; border-bottom: 8px solid var(--brand-red); display: none;
        }
        .shuffler-shuffled-list {
            text-align: left; background: rgba(255,255,255,0.1); padding: 20px;
            border-radius: 12px; max-height: 300px; overflow-y: auto; font-family: monospace;
            white-space: pre-wrap; margin-bottom: 20px;
        }

        /* Content Section */
        .shuffler-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .shuffler-info-card h5 { font-weight: 800; color: var(--navy); margin-bottom: 15px; border-left: 5px solid var(--brand-red); padding-left: 15px; }
        /* Loan Calculator CSS */
                /* Hero Section - Pure White */
        .loan-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .loan-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); margin-bottom: 10px; }
        .loan-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .loan-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .loan-premium-card {
            background: white;
            border-radius: 24px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .loan-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .loan-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .loan-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel - Heavy Look */
        .loan-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .loan-res-value { font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1; margin: 15px 0; }
        .loan-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .loan-stat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 25px;
        }
        .loan-stat-item {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 15px;
            text-align: left;
        }

        /* Content Strategy Section */
        .loan-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .loan-content-sec h2 { font-weight: 800; color: var(--navy); margin-bottom: 25px; }
        .loan-content-sec p { line-height: 1.8; color: #64748b; }

        .loan-btn-red {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .loan-btn-red:hover { background: #c12e39; transform: translateY(-2px); }
        /* Loan Refinanace Calculator CSS */
        
        .refinance-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .refinance-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .refinance-hero-section h1 span { color: var(--brand-red); }

        .refinance-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .refinance-section-header { font-weight: 800; font-size: 0.85rem; color: var(--brand-red); text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1px; }

        .refinance-premium-input {
            width: 100%; padding: 10px; border-radius: 8px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .refinance-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .refinance-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .refinance-savings-val { font-size: 3rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .refinance-savings-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 5px; display: block; }

        .refinance-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .refinance-comp-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
        .refinance-comp-box strong { display: block; font-size: 1.7rem; color: var(--white);  }
        /* Loagarithm Calculator CSS */
                .logarithm-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .logarithm-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .logarithm-hero-section h1 span { color: var(--brand-red); }

        .logarithm-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .logarithm-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .logarithm-input-group-custom { margin-bottom: 20px; }
        .logarithm-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        
        .logarithm-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.2rem; color: var(--navy);
            text-align: center;
        }
        .logarithm-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .logarithm-btn-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 20px; }
        
        .logarithm-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 15px;
            border-radius: 12px; font-weight: 800; transition: 0.3s; font-size: 1rem;
        }
        .logarithm-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }
        .logarithm-btn-navy { background: var(--navy); }

        .logarithm-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .logarithm-log-value { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; line-height: 1; margin: 10px 0; }

        .logarithm-formula-display {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 15px;
            margin-top: 20px; font-family: 'Courier New', Courier, monospace; font-size: 1.1rem;
        }
        /* Love Calculator CSS */
                .love-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .love-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .love-hero-section h1 span { color: var(--brand-red); }

        .love-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .love-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid #eee; box-shadow: 0 20px 40px rgba(230, 57, 70, 0.1);
        }

        .love-input-box { margin-bottom: 20px; }
        .love-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
            text-align: center; transition: 0.3s;
        }
        .love-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .love-heart-divider { font-size: 2rem; color: var(--brand-red); margin: 10px 0; display: block; text-align: center; }

        .love-calc-btn {
            background: var(--brand-red) ;
            color: white; border: none; padding: 18px; border-radius: 15px;
            font-weight: 800; width: 100%; font-size: 1.2rem; text-transform: uppercase;
            transition: 0.3s; cursor: pointer;
        }
        .love-calc-btn:hover { transform: scale(1.02); box-shadow: 0 10px 20px rgba(230, 57, 70, 0.3); }

        .love-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .love-score-val { font-size: 5rem; font-weight: 800; color: var(--brand-red); line-height: 1; }
        .love-advice-text { font-style: italic; opacity: 0.9; margin-top: 15px; font-size: 1.1rem; }
        /* LSI Calculator CSS */
                .lsi-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .lsi-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .lsi-hero-section h1 span { color: var(--brand-red); }

        .lsi-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .lsi-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .lsi-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .lsi-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .lsi-suggest-btn {
            background: var(--brand-red); color: white; border: none; padding: 15px;
            border-radius: 12px; font-weight: 800; width: 100%; text-transform: uppercase; transition: 0.3s;
        }
        .lsi-suggest-btn:hover { background: var(--navy); transform: translateY(-3px); }

        /* Result Area */
        .lsi-result-container { display: none; margin-top: 30px; }
        .lsi-badge {
            display: inline-block; background: white; border: 1px solid gainsboro;
            padding: 8px 15px; border-radius: 50px; margin: 5px; font-weight: 600;
            color: var(--navy); cursor: pointer; transition: 0.3s;
        }
        .lsi-badge:hover { border-color: var(--brand-red); color: var(--brand-red); transform: scale(1.05); }

        .lsi-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .lsi-info-card h5 { font-weight: 800; color: var(--navy); border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Luminance Calculator CSS */
                .luminance-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .luminance-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .luminance-hero-section h1 span { color: var(--brand-red); }

        .luminance-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .luminance-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .luminance-premium-input, .luminance-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .luminance-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .luminance-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .luminance-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .luminance-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .luminance-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .luminance-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .luminance-pro-tip { background: #eef2f7; border-radius: 12px; padding: 15px; margin-top: 25px; font-size: 0.85rem; }
        /* Lumpsum Calcultor CSS */
                /* Hero Section */
        .lumpsum-hero-section {
            background: white;
            padding: 60px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .lumpsum-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .lumpsum-hero-section h1 span { color: var(--brand-red); }

        /* Main Container */
        .lumpsum-calc-container {
            margin-top: 40px;
            padding-bottom: 60px;
        }

        .lumpsum-premium-card {
            background: white;
            border-radius: 24px;
            padding: 40px;
            border: 1px solid gainsboro;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        /* Inputs */
        .lumpsum-input-group-custom { margin-bottom: 25px; }
        .lumpsum-input-label { font-weight: 600; font-size: 0.95rem; color: #64748b; margin-bottom: 10px; display: block; }
        .lumpsum-premium-input {
            width: 100%;
            padding: 14px 20px;
            border-radius: 12px;
            border: 2px solid #f1f5f9;
            font-weight: 600;
            font-size: 1.1rem;
            transition: 0.3s;
        }
        .lumpsum-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fffcfc; }

        /* Result Panel */
        .lumpsum-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .lumpsum-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; opacity: 0.8; }
        .lumpsum-wealth-value { font-size: 3.5rem; font-weight: 800; margin: 10px 0; color: white; }
        
        .lumpsum-stat-box {
            background: rgba(255,255,255,0.05);
            padding: 20px;
            border-radius: 16px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .lumpsum-stat-title { font-size: 0.9rem; color: #cbd5e1; }
        .lumpsum-stat-val { font-size: 1.25rem; font-weight: 700; }

        .lumpsum-btn-calc {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 14px;
            font-weight: 700;
            font-size: 1.1rem;
            width: 100%;
            transition: 0.3s;
            margin-top: 10px;
        }
        .lumpsum-btn-calc:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(230, 57, 70, 0.3); }

        /* Content Section */
        .lumpsum-content-sec { padding: 80px 0;  background: white; border-top: 1px solid gainsboro; }
        .lumpsum-content-sec h2 { font-weight: 800; margin-bottom: 20px; }
        .lumpsum-content-sec p { line-height: 1.8; color: #64748b; }
        /* Macro Calculator CSS */
                .macro-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .macro-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .macro-hero-section h1 span { color: var(--brand-red); }

        .macro-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .macro-premium-card {
            background: white; border-radius: 24px; padding: 30px;
            border: 1px solid var(--border); box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }
        .micro-premium-card {
            background: var(--navy); border-radius: 24px; padding: 30px;
            border: 1px solid var(--border); box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }
        .macro-input-group-custom { margin-bottom: 20px; }
        .macro-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .macro-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }

        .macro-badge {
            padding: 20px; border-radius: 20px; text-align: center; color: white; margin-bottom: 15px;
        }
        .macro-bg-protein { background: #ff006e; }
        .macro-bg-carbs { background: #3a86ff; }
        .macro-bg-fats { background: #ffbe0b; color: #000; }

        .macro-val { font-size: 2.5rem; font-weight: 800; }
        /* Markup Calculator CSS */
                .markup-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .markup-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .markup-hero-section h1 span { color: var(--brand-red); }

        .markup-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .markup-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .markup-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .markup-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .markup-result-display {
            background: var(--navy); color: white; border-radius: 20px; padding: 25px; margin-top: 20px;
        }
        .markup-res-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .markup-res-row:last-child { margin-bottom: 0; border-top: 1px solid rgba(255,255,255,0.1);  margin-top: 10px; padding-top: 15px;}
        
        .markup-main-val { font-size: 2rem; font-weight: 800; color: #4ade80; }
        .markup-sub-label { font-size: 0.8rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; }
        /* Matrix Calculator CSS */
                .metrix-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .metrix-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .metrix-hero-section h1 span { color: var(--brand-red); }

        .metrix-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .metrix-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .metrix-matrix-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
            padding: 15px; border-left: 3px solid var(--navy); border-right: 3px solid var(--navy);
            border-radius: 10px; margin-bottom: 20px;
        }

        .matrix-input {
            width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ddd;
            text-align: center; font-weight: 700; font-size: 1.2rem;
        }

        .matrix-input:focus { border-color: var(--brand-red); outline: none; }

        .metrix-operator-box {
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            font-size: 2rem; font-weight: 800; color: var(--brand-red);
        }

        .metrix-btn-heavy {
            background: var(--brand-red); color: white; border: none; padding: 12px 25px;
            border-radius: 12px; font-weight: 700; transition: 0.3s; width: 100%;
        }
        .metrix-btn-heavy:hover { background: var(--navy); transform: translateY(-2px); }

        .metrix-result-panel {
            background: var(--navy); border-radius: 24px; padding: 30px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }

        .metrix-result-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
            max-width: 200px; margin: 20px auto;
            border-left: 3px solid var(--brand-red); border-right: 3px solid var(--brand-red);
            padding: 10px;
        }

        .metrix-res-box { font-size: 1.5rem; font-weight: 800; color: #4cc9f0; }
        /* MD5 Hash Generator Calculator CSS */
                .hash-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .hash-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .hash-hero-section h1 span { color: var(--brand-red); }

        .hash-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .hash-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .hash-premium-textarea {
            width: 100%; height: 120px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none; margin-bottom: 20px;
        }
        .hash-premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        .hash-gen-btn {
            background: var(--brand-red); color: white; border: none; padding: 15px;
            border-radius: 12px; font-weight: 800; width: 100%; text-transform: uppercase; transition: 0.3s;
        }
        .hash-gen-btn:hover { background: var(--navy); transform: translateY(-2px); }

        .hash-result-panel {
            margin-top: 30px; display: none; background: var(--bg-light);
            padding: 20px; border-radius: 15px; border: 2px dashed var(--brand-red);
            text-align: center;
        }
        .hash-hash-output { 
            font-family: 'Courier New', monospace; font-weight: 800; font-size: 1.2rem;
            color: var(--navy); word-break: break-all; margin: 15px 0; display: block;
        }

        .hash-copy-link {
            color: var(--brand-red); font-weight: 700; text-decoration: none; 
            cursor: pointer; font-size: 0.85rem; border-bottom: 2px solid var(--brand-red);
        }

        .hash-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .hash-info-card h5 { font-weight: 800; color: var(--navy); border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Menstrual Calculator CSS */
                .menstrual-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .menstrual-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .menstrual-hero-section h1 span { color: var(--brand-red); }

        .menstrual-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .menstrual-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .menstrual-input-group-custom { margin-bottom: 25px; }
        .menstrual-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .menstrual-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .menstrual-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .menstrual-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }

        .menstrual-cycle-roadmap {
            display: flex; flex-direction: column; gap: 15px; margin-top: 30px; text-align: left;
        }
        .menstrual-phase-card {
            background: rgba(255,255,255,0.05); border-left: 5px solid var(--brand-red);
            padding: 15px; border-radius: 12px; transition: 0.3s;
        }
        .menstrual-phase-card.menstrual-ovulation { border-left-color: var(--phase-blue); }
        .menstrual-phase-card h6 { margin-bottom: 5px; font-weight: 800; text-transform: uppercase; font-size: 0.8rem; }
        .menstrual-phase-card p { margin-bottom: 0; font-size: 1.1rem; font-weight: 600; }

        .menstrual-status-pill {
            background: var(--brand-red); color: white; padding: 5px 15px;
            border-radius: 50px; font-size: 0.9rem; font-weight: 700; display: inline-block; margin-bottom: 15px;
        }
        /* Meta Tag Generater Calculator CSS */
                .meta-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .meta-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .meta-hero-section h1 span { color: var(--brand-red); }

        .meta-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .meta-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .meta-premium-input, .meta-premium-textarea {
            width: 100%; padding: 12px 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .meta-premium-textarea { height: 100px; resize: none; }
        .meta-premium-input:focus, .premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        /* Google Preview */
        .meta-google-preview {
            background: #fff; padding: 20px; border-radius: 12px; border: 1px solid gainsboro;
            margin-bottom: 30px; max-width: 600px;
        }
        .meta-preview-title { color: #1a0dab; font-size: 20px; font-family: arial, sans-serif; margin-bottom: 3px; cursor: pointer; }
        .meta-preview-url { color: #006621; font-size: 14px; margin-bottom: 3px; }
        .meta-preview-desc { color: #545454; font-size: 14px; line-height: 1.4; }

        .meta-gen-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .meta-gen-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .meta-result-box {
            margin-top: 30px; display: none; background: #0f172a; color: #38bdf8;
            padding: 25px; border-radius: 15px; font-family: 'Courier New', monospace;
            position: relative; border-bottom: 6px solid var(--brand-red);
        }

        .meta-copy-btn {
            position: absolute; top: 15px; right: 15px; background: var(--brand-red);
            color: white; border: none; padding: 6px 15px; border-radius: 8px; font-size: 0.75rem; font-weight: 700;
        }
        /* Morse Code Generator Calculator CSS */
                .morse-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .morse-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .morse-hero-section h1 span { color: var(--brand-red); }

        .morse-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .morse-input-label { font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 10px; display: block; }
        
        .morse-premium-textarea {
            width: 100%; height: 150px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-weight: 400; font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none;
        }
        .morse-premium-textarea:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .morse-swap-icon {
            font-size: 1.5rem; color: var(--brand-red); margin: 20px 0; cursor: pointer; transition: 0.3s;
        }
        .morse-swap-icon:hover { transform: scale(1.2) rotate(180deg); }

        .morse-action-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s; margin-top: 10px;
        }
        .morse-action-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .morse-copy-btn {
            background: transparent; color: var(--navy); border: 1px solid var(--navy);
            padding: 5px 15px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
            margin-top: 10px; transition: 0.3s;
        }
        .morse-copy-btn:hover { background: var(--navy); color: white; }

        .morse-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .morse-info-card h5 { font-weight: 800; color: var(--navy); margin-bottom: 15px; border-left: 5px solid var(--brand-red); padding-left: 15px; }
        /* Mortgage Amortization Calculator CSS */
                .amortization-hero-section {
            background: white;
            padding: 60px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .amortization-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .amortization-hero-section h1 span { color: var(--brand-red); }

        .amortization-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .amortization-premium-card {
            background: white;
            border-radius: 24px;
            padding: 35px;
            border: 1px solid gainsboro;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .amortization-input-group-custom { margin-bottom: 20px; }
        .amortization-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .amortization-premium-input {
            width: 100%;
            padding: 12px 18px;
            border-radius: 12px;
            border: 2px solid #f1f5f9;
            font-weight: 600;
            font-size: 1.1rem;
        }

        .amortization-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            position: sticky;
            top: 100px;
        }
        .amortization-emi-large { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; }

        /* Schedule Table */
        .amortization-table-container {
            background: white;
            border-radius: 20px;
            padding: 25px;
            margin-top: 40px;
            border: 1px solid var(--border);
            overflow-x: auto;
        }
        .amortization-table thead { background: var(--bg-light); }
        .amortization-table th { border: none; padding: 15px; font-weight: 700; color: var(--navy); }
        .amortization-table td { padding: 15px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
        /* Mortgage Calculator CSS */
                /* Hero Section - Pure White (Matching Home) */
        .mortgage-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .mortgage-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .mortgage-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .mortgage-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .mortgage-premium-card {
            background: white;
            border-radius: 24px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .mortgage-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .mortgage-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .mortgage-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel - Heavy Look */
        .mortgage-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .mortgage-emi-value { font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1; margin: 15px 0; }
        .mortgage-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .mortgage-breakdown-box {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            padding: 20px;
            margin-top: 25px;
            text-align: left;
        }

        /* SEO Content Strategy Section */
        .mortgage-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .mortgage-content-sec h2 { font-weight: 800; margin-bottom: 25px; color: var(--navy); }
        .mortgage-content-sec p { line-height: 1.8; color: #64748b; }

        .mortgage-btn-calc {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .mortgage-btn-calc:hover { background: #c12e39; transform: translateY(-2px); }
        /* Mortgage Payoff Calculator CSS */
                /* Hero Section - Pure White Background */
        .payoff-hero-section {
            background: #ffffff;
            padding: 70px 0 90px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .payoff-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .payoff-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .payoff-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .payoff-premium-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .payoff-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .payoff-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .payoff-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel - Super Heavy Look */
        .payoff-result-panel {
            background: var(--navy);
            border-radius: 25px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .payoff-savings-value { font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1; margin: 15px 0; }
        .payoff-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .payoff-summary-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 30px;
        }
        .payoff-summary-item {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 15px;
            text-align: left;
        }

        /* Content Strategy Section */
        .payoff-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .payoff-content-sec h2 { font-weight: 800; margin-bottom: 25px; color: var(--navy); }
        .payoff-content-sec p { line-height: 1.8; color: #64748b; }

        .payoff-btn-payoff {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .payoff-btn-payoff:hover { background: #c12e39; transform: translateY(-2px); }
        /* Net Worth Calculator CSS */
                .net-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .net-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .net-hero-section h1 span { color: var(--brand-red); }

        .net-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .net-premium-card {
            background: white; border-radius: 24px; padding: 30px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .net-section-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 20px; display: flex; align-items: center; }
        .net-section-title i { margin-right: 10px; }

        .net-input-group-custom { margin-bottom: 15px; }
        .net-input-label { font-weight: 600; font-size: 0.85rem; color: #64748b; margin-bottom: 5px; display: block; }
        .net-premium-input {
            width: 100%; padding: 10px 15px; border-radius: 10px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1rem;
        }
        .net-premium-input:focus { border-color: var(--navy); outline: none; }

        .net-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; position: sticky; top: 20px;
        }
        .net-worth-value { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .net-summary-box {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 15px; margin-top: 20px;
        }
        /* Overtime Pay Calculator CSS */
                .overtime-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .overtime-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .overtime-hero-section h1 span { color: var(--brand-red); }

        .overtime-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .overtime-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .overtime-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .overtime-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .overtime-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px;
        }
        .overtime-pay-row { display: flex; justify-content: space-between; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .overtime-pay-row.overtime-total { border-bottom: none; padding-top: 15px; font-weight: 800; font-size: 1.8rem; color: #4ade80; }
        
        .overtime-multiplier-badge { background: var(--brand-red); color: white; font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; }
        /* Ovulation Calculator CSS */
                .ovulation-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .ovulation-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .ovulation-hero-section h1 span { color: var(--brand-red); }

        .ovulation-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .ovulation-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .ovulation-input-group-custom { margin-bottom: 25px; }
        .ovulation-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .ovulation-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .ovulation-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .ovulation-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .ovulation-date { font-size: 2.8rem; font-weight: 800; color: var(--brand-red); margin: 10px 0; }
        
        .ovulation-fertile-window-box {
            background: rgba(255,255,255,0.1); border-radius: 15px; padding: 20px; margin-top: 20px;
            border: 1px dashed var(--brand-red);
        }

        .ovulation-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .ovulation-stat-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px; }
        .ovulation-stat-val { font-size: 1.1rem; font-weight: 700; color: #4cc9f0; }
        /* Partenrship Split Calculator CSS */
                .partnership-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .partnership-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .partnership-hero-section h1 span { color: var(--brand-red); }

        .partnership-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .partnership-partner-label { font-weight: 800; color: var(--brand-red); margin-bottom: 15px; display: block; text-transform: uppercase; letter-spacing: 1px;}
        .partnership-input-group-label { font-weight: 700; font-size: 0.75rem; color: var(--navy); margin-bottom: 6px; display: block; }
        
        .partnership-premium-input {
            width: 100%; padding: 10px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .partnership-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .partnership-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 25px; margin-top: 20px;
        }
        .partnership-split-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .partnership-split-row:last-child { border: none; margin-bottom: 0; }
        
        .partnership-perc-val { font-size: 2rem; font-weight: 800; color: #4ade80; }
        .partnership-partner-name { font-weight: 600; font-size: 1.1rem; }
        /* Password Generator Calculator CSS */
                .password-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .password-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .password-hero-section h1 span { color: var(--brand-red); }

        .password-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .password-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .password-pass-display-container {
            background: var(--navy); border-radius: 15px; padding: 20px;
            position: relative; margin-bottom: 30px; display: flex; align-items: center;
        }
        #passwordOutput {
            color: #4cc9f0; font-size: 1.5rem; font-weight: 700; border: none;
            background: transparent; width: 100%; outline: none; font-family: 'Courier New', Courier, monospace;
        }
        .password-copy-btn {
            background: var(--brand-red); color: white; border: none; padding: 10px 15px;
            border-radius: 10px; cursor: pointer; transition: 0.3s;
        }
        .password-copy-btn:hover { transform: scale(1.1); }

        .password-setting-item {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 15px; padding: 10px; background: #f8fafd; border-radius: 12px;
        }
        .password-setting-item label { font-weight: 600; margin-bottom: 0; }

        .password-strength-meter {
            height: 8px; border-radius: 4px; background: #e2e8f0; margin-top: 10px; overflow: hidden;
        }
        #strengthBar { height: 100%; width: 0%; transition: 0.5s; }

        .password-generate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; margin-top: 20px;
            font-size: 1.1rem; text-transform: uppercase;
        }
        .password-generate-btn:hover { background: var(--navy); transform: translateY(-3px); }
        /* Pay Check Calculator CSS */
                .paycheck-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .paycheck-hero-section h1 { font-weight: 800; color: var(--navy); }
        .paycheck-hero-section h1 span { color: var(--brand-red); }

        .paycheck-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .paycheck-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .paycheck-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .paycheck-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .paycheck-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px;
        }
        .paycheck-pay-item { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.95rem; }
        .paycheck-pay-item.paycheck-total { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; margin-top: 15px; font-weight: 800; font-size: 1.4rem; color: #4ade80; }
        
        .paycheck-tax-tag { font-size: 0.7rem; background: var(--brand-red); color: white; padding: 2px 8px; border-radius: 4px; vertical-align: middle; }
        /* Payment Calculator CSS */
                /* Hero Section - Pure White */
        .payment-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .payment-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .payment-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .payment-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .payment-premium-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .payment-type-toggle {
            display: flex;
            background: #f1f5f9;
            padding: 6px;
            border-radius: 15px;
            margin-bottom: 30px;
        }
        .payment-type-btn {
            flex: 1; padding: 12px; border: none; border-radius: 12px;
            font-weight: 700; background: transparent; color: #64748b; transition: 0.3s;
        }
        .payment-type-btn.payment-active { background: white; color: var(--brand-red); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

        .payment-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .payment-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .payment-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel - Heavy & Professional */
        .payment-result-panel {
            background: var(--navy);
            border-radius: 25px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .payment-payment-value { font-size: 3.8rem; font-weight: 800; color: #fff; line-height: 1; margin: 15px 0; }
        .payment-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .payment-breakdown-card {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            text-align: left;
        }

        /* Content Strategy Section */
        .payment-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .payment-content-sec h2 { font-weight: 800; margin-bottom: 25px; color: var(--navy); }
        .payment-content-sec p { line-height: 1.8; color: #64748b; }


        .payment-btn-action {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .payment-btn-action:hover { background: #c12e39; transform: translateY(-2px); }
        /* Percentage Calculator CSS */
                /* Hero Section - Pure White */
        .percentage-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .percentage-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .percentage-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .percentage-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .percentage-premium-card {
            background: white;
            border-radius: 24px;
            border: 1px solid gainsboro;
            padding: 30px;
            box-shadow: 0 15px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
            transition: 0.3s;
        }
        .percentage-premium-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(29, 53, 87, 0.1); }

        .percentage-card-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 20px; display: flex; align-items: center; }
        .percentage-card-title i { color: var(--brand-red); margin-right: 10px; }

        .percentage-input-label { font-weight: 600; font-size: 0.85rem; color: #64748b; margin-bottom: 6px; display: block; }
        
        .percentage-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 10px;
            padding: 10px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .percentage-premium-input:focus { border-color: var(--brand-red); }

        .percentage-result-box {
            background: var(--navy);
            color: white;
            border-radius: 12px;
            padding: 15px;
            margin-top: 20px;
            text-align: center;
        }
        .percentage-res-val { font-size: 1.8rem; font-weight: 800; display: block; }
        .percentage-res-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; }

        /* Content Strategy Section */
        .percentage-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .percentage-content-sec h2 { font-weight: 800; color: var(--navy); margin-bottom: 25px; }
        .percentage-content-sec p { line-height: 1.8; color: #64748b; }

        .percentage-btn-red {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 12px;
            font-weight: 700;
            border-radius: 10px;
            width: 100%;
            margin-top: 15px;
        }
        /* Periods Calculator CSS */
        .periods-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .periods-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .periods-hero-section h1 span { color: var(--brand-red); }

        .periods-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .periods-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .periods-input-group-custom { margin-bottom: 25px; }
        .periods-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .periods-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .periods-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .periods-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .periods-next-date { font-size: 3rem; font-weight: 800; color: var(--brand-red); margin: 10px 0; }
        
        .periods-cycle-list { margin-top: 25px; text-align: left; }
        .periods-cycle-item { 
            background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px; 
            margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
        }
        .periods-cycle-item span { font-weight: 700; color: #4cc9f0; }
        /* Personal Loan Calculator CSS */
                /* Hero Section - Pure White */
        .personal-hero-section {
            background: #ffffff;
            padding: 70px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .personal-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .personal-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .personal-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .personal-premium-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
        }

        .purpose-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 30px;
        }
        .purpose-btn {
            padding: 12px;
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            background: white;
            font-weight: 600;
            font-size: 0.8rem;
            color: #64748b;
            cursor: pointer;
            transition: 0.3s;
        }
        .purpose-btn.active { border-color: var(--brand-red); color: var(--brand-red); background: #fff5f5; }

        .personal-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .personal-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .personal-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel - Heavy Look */
        .personal-result-panel {
            background: var(--navy);
            border-radius: 25px;
            padding: 40px;
            color: white;
            text-align: center;
            height: 100%;
        }
        .personal-res-value { font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1; margin: 15px 0; }
        .personal-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .personal-stat-box {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            padding: 20px;
            margin-top: 25px;
            text-align: left;
        }

        /* Content Section */
        .personal-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .personal-content-sec h2 { font-weight: 800; color: var(--navy); margin-bottom: 25px; }
        .personal-content-sec p { line-height: 1.8; color: #64748b; }

        .personal-btn-red {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .personal-btn-red:hover { background: #c12e39; transform: translateY(-2px); }
        /* Power Converter CSS */
                .power-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .power-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .power-hero-section h1 span { color: var(--brand-red); }

        .power-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .power-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .power-premium-input, .power-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .power-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .power-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .power-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .power-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .power-unit-val { display: block; font-weight: 800; color: var(--text-dark); font-size: 1.1rem; word-break: break-all; }
        .power-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
        /* Pregnancy Due Date Calculator CSS */
                .pregnancy-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .pregnancy-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .pregnancy-hero-section h1 span { color: var(--brand-red); }

        .pregnancy-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .pregnancy-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .pregnancy-input-group-custom { margin-bottom: 25px; }
        .pregnancy-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .pregnancy-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .pregnancy-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .pregnancy-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
            border-bottom: 8px solid var(--brand-red); text-align: center;
        }
        .pregnancy-due-date-text { font-size: 3rem; font-weight: 800; color: var(--brand-red); margin: 10px 0; }
        
        .pregnancy-progress-container { background: rgba(255,255,255,0.1); border-radius: 50px; height: 15px; margin: 20px 0; overflow: hidden; }
        .pregnancy-progress-fill { background: var(--brand-red); height: 100%; width: 0%; transition: 1s ease-in-out; }

        .pregnancy-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .pregnancy-stat-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px; }
        .pregnancy-stat-val { font-size: 1.2rem; font-weight: 700; color: #4cc9f0; }
        /* Pressure Calculator CSS */
                .pressure-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .pressure-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .pressure-hero-section h1 span { color: var(--brand-red); }

        .pressure-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .pressure-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .pressure-premium-input, .pressure-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .pressure-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .pressure-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .pressure-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .pressure-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .pressure-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .pressure-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
        /* Prime Number Checker Calculator CSS */
                .Prime-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .Prime-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .Prime-hero-section h1 span { color: var(--brand-red); }

        .Prime-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .Prime-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .Prime-input-label { font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 12px; display: block; }
        .Prime-premium-input {
            width: 100%; padding: 18px; border-radius: 15px; border: 2px solid #f1f5f9;
            font-size: 1.5rem; font-weight: 700; color: var(--navy); text-align: center;
        }
        .Prime-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .Prime-check-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; margin-top: 20px; transition: 0.3s;
            font-size: 1.1rem; text-transform: uppercase;
        }
        .Prime-check-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .Prime-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .Prime-status-icon { font-size: 4rem; margin-bottom: 15px; }
        .Prime-res-text { font-size: 2.2rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
        .Prime-res-subtext { color: #4cc9f0; font-weight: 600; font-size: 1.1rem; }

        .Prime-info-box {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 15px;
            margin-top: 20px; font-size: 0.9rem;
        }
        /* Privacy Page CSS */
                .privacy-hero-section {
            background: linear-gradient(135deg, var(--navy) 0%, #2a4a6f 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }

        .privacy-hero-section h1 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .privacy-hero-section .privacy-update-date {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .privacy-content-section {
            padding: 80px 0;
        }

        .privacy-content-wrapper {
            background: var(--white);
            border-radius: 30px;
            padding: 60px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.06);
            max-width: 900px;
            margin: -50px auto 0;
            position: relative;
            z-index: 10;
        }

        .privacy-toc {
            background: var(--bg-light);
            border-left: 4px solid var(--brand-red);
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 50px;
        }

        .privacy-toc h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 20px;
        }

        .privacy-toc ul {
            list-style: none;
            padding: 0;
        }

        .privacy-toc ul li {
            margin-bottom: 10px;
        }

        .privacy-toc ul li a {
            color: #64748b;
            text-decoration: none;
            transition: 0.3s;
            font-weight: 500;
        }

        .privacy-toc ul li a:hover {
            color: var(--brand-red);
            padding-left: 10px;
        }

        .privacy-section-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--navy);
            margin-top: 50px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--brand-red);
        }

        .privacy-section-title:first-of-type { margin-top: 0; }

        .privacy-highlight-box {
            background: #fef2f2;
            border: 2px solid var(--brand-red);
            border-radius: 15px;
            padding: 25px;
            margin: 30px 0;
        }

        .privacy-highlight-box h4 {
            color: var(--brand-red);
            font-weight: 700;
            margin-bottom: 15px;
        }

        .privacy-info-box {
            background: #e0f2fe;
            border-left: 4px solid #0284c7;
            padding: 20px;
            border-radius: 10px;
            margin: 25px 0;
        }

        .privacy-info-box i {
            color: #0284c7;
            font-size: 1.3rem;
            margin-right: 10px;
        }

        p { margin-bottom: 15px; }
        
        ul { margin: 20px 0; padding-left: 25px; }
        
        ul li { margin-bottom: 10px; color: #475569; }

        strong { color: var(--navy); }

        @media (max-width: 768px) {
            .privacy-content-wrapper { padding: 30px 20px; }
            .privacy-hero-section h1 { font-size: 2rem; }
        }
        /* Pribability Calculator CSS */
                .Probability-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .Probability-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .Probability-hero-section h1 span { color: var(--brand-red); }

        .Probability-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .Probability-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            margin-bottom: 30px;
        }

        .Probability-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .Probability-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 700; font-size: 1.2rem; color: var(--navy);
            text-align: center;
        }
        .Probability-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .Probability-action-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.1rem; text-transform: uppercase;
        }
        .Probability-action-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .Probability-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 20px;
        }
        .Probability-prob-value { font-size: 4rem; font-weight: 800; color: #4cc9f0; line-height: 1; }
        
        .Probability-percentage-badge {
            background: var(--brand-red); color: white; padding: 5px 15px;
            border-radius: 50px; font-weight: 800; font-size: 1.2rem; display: inline-block; margin-top: 10px;
        }
        /* Pythagoras Theorem Calculator CSS */
                .pythagoras-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .pythagoras-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .pythagoras-hero-section h1 span { color: var(--brand-red); }

        .pythagoras-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .pythagoras-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .pythagoras-input-group-custom { margin-bottom: 20px; }
        .pythagoras-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .pythagoras-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .pythagoras-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .pythagoras-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .pythagoras-side-value { font-size: 4rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .pythagoras-formula-box {
            background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px;
            margin-top: 20px; font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;
        }

        .pythagoras-triangle-visual {
            width: 150px; height: 100px; border-left: 5px solid var(--navy);
            border-bottom: 5px solid var(--brand-red); margin: 20px auto;
            position: relative;
        }
        .pythagoras-hypotenuse {
            position: absolute; top: 0; left: 0; width: 180px; height: 5px;
            background: #4cc9f0; transform: rotate(33deg); transform-origin: top left;
        }
        /* QR Code Generator Calculator CSS */
                .qr-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .qr-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .qr-hero-section h1 span { color: var(--brand-red); }

        .qr-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .qr-input-label { font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 10px; display: block; }
        
        .qr-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 25px; transition: 0.3s;
        }
        .qr-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .qr-gen-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .qr-gen-btn:hover { background: var(--navy); transform: translateY(-3px); }

        /* QR Result Panel */
        .qr-result {
            margin-top: 30px; text-align: center; display: none;
            padding: 30px; border-radius: 20px; background: var(--bg-light);
            border: 2px dashed gainsboro;
        }
        canvas { 
            background: white; padding: 15px; border-radius: 15px; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .qr-download-link {
            display: inline-block; margin-top: 20px; color: var(--brand-red);
            font-weight: 800; text-decoration: none; font-size: 0.9rem;
            text-transform: uppercase; border-bottom: 2px solid var(--brand-red);
        }

        .qr-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .qr-info-card h5 { font-weight: 800; color: var(--navy); margin-bottom: 15px; border-left: 5px solid var(--brand-red); padding-left: 15px; }
        /* Quadratic Equation Solver Calculator CSS */
                .quadratic-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .quadratic-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .quadratic-hero-section h1 span { color: var(--brand-red); }

        .quadratic-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .quadratic-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .quadratic-equation-display {
            background: #f1f5f9; padding: 25px; border-radius: 20px;
            display: flex; align-items: center; justify-content: center; gap: 10px;
            font-size: 1.5rem; font-weight: 700; margin-bottom: 25px; flex-wrap: wrap;
        }

        .quadratic-math-input {
            width: 80px; padding: 12px; border-radius: 12px; border: 2px solid var(--navy);
            text-align: center; font-weight: 800; color: var(--brand-red); font-size: 1.2rem;
        }

        .quadratic-solve-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;
        }
        .quadratic-solve-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .quadratic-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .quadratic-root-value { font-size: 3rem; font-weight: 800; color: #4cc9f0; }

        .quadratic-step-box {
            background: rgba(255,255,255,0.05); border-radius: 15px; padding: 20px;
            margin-top: 25px; text-align: left; border: 1px solid rgba(255,255,255,0.1);
        }
        /* Random Number Generator Calculator CSS */
                .random-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .random-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .random-hero-section h1 span { color: var(--brand-red); }

        .random-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .random-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .random-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .random-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 700; font-size: 1.2rem; color: var(--navy);
            text-align: center; margin-bottom: 20px;
        }
        .random-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .random-generate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px;
        }
        .random-generate-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .random-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
            position: relative; overflow: hidden;
        }
        .random-result-number { font-size: 6rem; font-weight: 800; color: #4cc9f0; line-height: 1; margin: 10px 0; }
        
        /* Animation for number reveal */
        .count-anim { animation: roll 0.3s ease-out; }
        @keyframes roll {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        /* Ratio Calculator CSS */
                .ratio-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .ratio-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .ratio-hero-section h1 span { color: var(--brand-red); }

        .ratio-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .ratio-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            margin-bottom: 30px;
        }

        .ratio-ratio-box {
            display: flex; align-items: center; justify-content: center; gap: 15px;
            margin: 20px 0;
        }

        .ratio-premium-input {
            width: 120px; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 700; font-size: 1.5rem; 
            color: var(--navy); text-align: center;
        }
        .ratio-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .ratio-colon { font-size: 2rem; font-weight: 800; color: var(--brand-red); }

        .ratio-action-btn {
            background: var(--brand-red); color: white; border: none; padding: 15px 30px;
            border-radius: 12px; font-weight: 800; width: 100%; transition: 0.3s;
        }
        .ratio-action-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .ratio-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .ratio-res-val { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; }
        /* Real Estate Calculator CSS */
                /* Hero Section - Pure White */
        .real-hero-section {
            background: #ffffff;
            padding: 70px 0 85px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .real-hero-section h1 { font-weight: 800; color: var(--navy); font-size: 3rem; margin-bottom: 10px; }
        .real-hero-section h1 span { color: var(--brand-red); }

        /* Calculator Container with 40px Padding */
        .real-calc-container {
            padding: 40px 0;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .real-premium-card {
            background: white;
            border-radius: 25px;
            border: 1px solid gainsboro;
            padding: 35px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
            height: 100%;
        }

        .real-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        
        .real-premium-input {
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            outline: none;
            transition: 0.3s;
        }
        .real-premium-input:focus { border-color: var(--brand-red); }

        /* Result Panel - Heavy & Detailed */
        .real-result-panel {
            background: var(--navy);
            border-radius: 25px;
            padding: 40px;
            color: white;
            height: 100%;
        }
        .real-takehome-value { font-size: 3rem; font-weight: 800; color: #fff; line-height: 1; margin: 10px 0; }
        .real-res-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; }
        
        .real-tax-table {
            width: 100%;
            margin-top: 25px;
            border-collapse: separate;
            border-spacing: 0 10px;
        }
        .real-tax-table td { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .real-tax-table .val { text-align: right; font-weight: 600; }

        .real-progress-custom {
            height: 8px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            margin: 20px 0;
            overflow: hidden;
        }
        .real-progress-bar-fill {
            height: 100%;
            background: var(--brand-red);
            width: 0%;
            transition: 0.6s;
        }

        /* Content Section */
        .real-content-sec {
            padding: 80px 0;
            background: white;
            border-top: 1px solid gainsboro;
        }
        .real-content-sec h2 { font-weight: 800; margin-bottom: 25px; color: var(--navy); }
        .real-content-sec p { line-height: 1.8; color: #64748b; }


        .real-btn-calc {
            background: var(--brand-red);
            color: white;
            border: none;
            padding: 15px;
            font-weight: 700;
            border-radius: 12px;
            transition: 0.3s;
        }
        .real-btn-calc:hover { background: #c12e39; transform: translateY(-2px); }
        /* Retirment 401K Planner Calculator CSS */
                .retirement-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .retirement-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .retirement-hero-section h1 span { color: var(--brand-red); }

        .retirement-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .retirement-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .retirement-input-group-custom { margin-bottom: 20px; }
        .retirement-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .retirement-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem;
        }
        .retirement-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .retirement-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
        }
        .retirement-wealth-large { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .retirement-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .retirement-stat-line:last-child { border: none; }
        /* Robot TXT Genenrator Calculator CSS */
                .robot-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .robot-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .robot-hero-section h1 span { color: var(--brand-red); }

        .robot-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .robot-input-label { font-weight: 700; font-size: 0.9rem; color: var(--navy); margin-bottom: 8px; display: block; }
        
        .robot-premium-select, .robot-premium-input {
            width: 100%; padding: 12px 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .robot-premium-select:focus, .robot-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .robot-gen-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .robot-gen-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .robot-result-box {
            margin-top: 30px; display: none; background: #0f172a; color: #38bdf8;
            padding: 25px; border-radius: 15px; font-family: 'Courier New', monospace;
            position: relative; border-left: 6px solid var(--brand-red);
        }

        .robot-copy-btn {
            position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.1);
            color: white; border: none; padding: 6px 15px; border-radius: 8px; font-size: 0.75rem; font-weight: 700;
        }
        .robot-copy-btn:hover { background: var(--brand-red); }
        /* ROI Calculator CSS */
                .roi-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .roi-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .roi-hero-section h1 span { color: var(--brand-red); }

        .roi-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .roi-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .roi-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .roi-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .roi-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .roi-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .roi-result-panel {
            display: none; margin-top: 30px; padding: 30px; border-radius: 20px; 
            background: var(--navy); color: white; text-align: center;
            border-bottom: 8px solid var(--brand-red);
        }
        .roi-res-val { font-size: 3.5rem; font-weight: 800; color: #fff; display: block; }
        .roi-res-label { font-size: 0.9rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }

        .roi-stats-summary { display: flex; justify-content: space-around; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
        .roi-stat-box h6 { font-size: 0.75rem; opacity: 0.7; text-transform: uppercase; margin-bottom: 5px; }
        .roi-stat-box p { font-weight: 700; font-size: 1.1rem; color: var(--brand-red); margin: 0; }
        /* Roman Numerals Calculator CSS */
                .roman-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .roman-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .roman-hero-section h1 span { color: var(--brand-red); }

        .roman-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .roman-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .roman-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s; font-size: 1.2rem;
        }
        .roman-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .roman-switch-icon { text-align: center; margin-bottom: 20px; color: var(--brand-red); font-size: 1.5rem; }

        .roman-result-box {
            background: var(--navy); color: white; padding: 25px; border-radius: 15px;
            text-align: center; margin-top: 10px; border-bottom: 5px solid var(--brand-red);
        }
        .roman-result-val { font-size: 2.5rem; font-weight: 800; display: block; letter-spacing: 2px; }

        .roman-table { margin-top: 30px; font-size: 0.9rem; }
        .roman-table th { background: var(--navy); color: white; }
        /* Rounding Numbers Calculator CSS */
                .rounding-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .rounding-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .rounding-hero-section h1 span { color: var(--brand-red); }

        .rounding-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .rounding-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .rounding-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .rounding-premium-input, .rounding-premium-select {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.2rem; color: var(--navy);
            margin-bottom: 20px;
        }
        .rounding-premium-input:focus, .rounding-premium-select:focus { border-color: var(--brand-red); outline: none; }

        .rounding-round-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.2rem; text-transform: uppercase;
        }
        .rounding-round-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .rounding-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .rounding-rounded-value { font-size: 4.5rem; font-weight: 800; color: #4cc9f0; line-height: 1; margin: 10px 0; }
        /* Sales Tax Calculator CSS */
                .sales-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .sales-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .sales-hero-section h1 span { color: var(--brand-red); }

        .sales-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .sales-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .sales-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .sales-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .sales-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px;
        }
        .sales-tax-row { display: flex; justify-content: space-between; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; }
        .sales-tax-row.sales-total { border-bottom: none; padding-top: 10px; font-weight: 800; font-size: 1.5rem; color: #4ade80; }
        /* Scientific Calculator CSS */
                .sales-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .sales-hero-section h1 { font-weight: 800; font-size: 2.5rem; }
        .sales-hero-section h1 span { color: var(--brand-red); }

        /* Professional Scientific UI */
        .scientific-sci-wrapper {
            background: white;
            border-radius: 28px;
            border: 1px solid gainsboro;
            padding: 25px;
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.08);
            max-width: 500px;
            margin: 0 auto;
            margin-top: 40px;
        }

        /* Display Screen */
        .scientific-display-panel {
            background: #f1f5f9;
            border-radius: 18px;
            padding: 20px;
            text-align: right;
            margin-bottom: 20px;
            border: 2px solid #e2e8f0;
        }

        #expression { font-size: 0.9rem; color: #64748b; min-height: 22px; font-weight: 600; margin-bottom: 5px; }
        #result { font-size: 2.4rem; font-weight: 800; color: var(--text-dark); overflow: hidden; }

        .scientific-mode-indicator {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        .mode-badge {
            font-size: 0.7rem;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            background: #e2e8f0;
            color: #64748b;
        }
        .mode-badge.active { background: var(--brand-red); color: white; }

        /* Buttons Grid */
        .sci-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
        }

        .sci-btn {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px 5px;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-dark);
            transition: 0.2s;
        }

        .sci-btn:hover {
            border-color: var(--brand-red);
            color: var(--brand-red);
            background: #fff5f5;
            transform: translateY(-2px);
        }

        /* Scientific Func Buttons */
        .btn-func { background: #f8fafc; color: #475569; font-size: 0.85rem; }
        
        /* Highlight Buttons */
        .btn-red { background: var(--brand-red); color: white; border: none; }
        .btn-red:hover { background: #c12e39; color: white; }
        
        .btn-dark { background: var(--text-dark); color: white; border: none; }
        .btn-dark:hover { background: #0f1c2e; color: white; }

        .btn-op { color: var(--brand-red); font-weight: 800; }

        /* Equals Button */
        .btn-equals { grid-column: span 2; background: var(--brand-red); color: white; border: none; }
        .btn-equals:hover { background: #c12e39; color: white; }

        /* History */
        .scientific-history-box {
            margin-top: 20px;
            border-top: 1px solid #f1f5f9;
            padding-top: 15px;
        }
        .scientific-history-item { font-size: 0.8rem; color: #64748b; margin-bottom: 4px; display: flex; justify-content: space-between; }
        /* Services Page CSS */
                .services-header {
            background: var(--white);
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .services-hero-section {
            background: linear-gradient(135deg, var(--navy) 0%, #2a4a6f 100%);
            color: white;
            padding: 100px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .services-hero-section::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            background: var(--brand-red);
            border-radius: 50%;
            opacity: 0.1;
            top: -300px;
            right: -200px;
        }

        .services-hero-section h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            position: relative;
        }

        .services-hero-section p {
            font-size: 1.3rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
            position: relative;
        }

        .services-section {
            padding: 100px 0;
        }

        .service-card {
            background: var(--white);
            border-radius: 30px;
            padding: 50px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.06);
            margin-bottom: 40px;
            transition: 0.3s;
            border: 3px solid transparent;
        }

        .service-card:hover {
            border-color: var(--brand-red);
            transform: translateY(-10px);
            box-shadow: 0 30px 80px rgba(230, 57, 70, 0.15);
        }

        .services-service-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--brand-red), #ff6b7a);
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
            margin-bottom: 30px;
        }

        .service-card h3 {
            font-size: 2rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 20px;
        }

        .service-card p {
            color: #475569;
            font-size: 1.1rem;
            margin-bottom: 25px;
        }

        .services-feature-list {
            list-style: none;
            padding: 0;
            margin: 30px 0;
        }

        .services-feature-list li {
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0;
            color: #64748b;
            font-size: 1.05rem;
        }

        .services-feature-list li:last-child { border-bottom: none; }

        .services-feature-list i {
            color: var(--brand-red);
            margin-right: 12px;
            font-size: 1.1rem;
        }

        .services-pricing-box {
            background: var(--bg-light);
            border-radius: 20px;
            padding: 30px;
            margin-top: 30px;
        }

        .services-pricing-box h4 {
            color: var(--navy);
            font-weight: 700;
            margin-bottom: 15px;
        }

        .services-price {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--brand-red);
            margin-bottom: 10px;
        }

        .services-price small {
            font-size: 1rem;
            color: #64748b;
            font-weight: 400;
        }

        .services-btn-primary {
            background: var(--brand-red);
            color: white;
            padding: 15px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            display: inline-block;
            transition: 0.3s;
            border: none;
            font-size: 1.1rem;
        }

        .services-btn-primary:hover {
            background: #d62839;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(230, 57, 70, 0.3);
            color: white;
        }

        .services-process-section {
            background: var(--white);
            padding: 100px 0;
        }

        .services-section-title {
            font-size: 2.5rem;
            font-weight: 800;
            text-align: center;
            color: var(--navy);
            margin-bottom: 60px;
        }

        .services-process-step {
            text-align: center;
            padding: 40px;
            position: relative;
        }

        .services-step-number {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--brand-red), #ff6b7a);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2rem;
            font-weight: 800;
            color: white;
        }

        .services-process-step h4 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 15px;
        }

        .services-process-step p {
            color: #64748b;
        }

        .services-cta-section {
            background: linear-gradient(135deg, var(--brand-red) 0%, #ff6b7a 100%);
            color: white;
            padding: 80px;
            text-align: center;
            border-radius: 30px;
            margin: 80px 0;
        }

        .services-cta-section h2 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 20px;
        }
        @media (max-width: 768px) {
            .services-hero-section h1 { font-size: 2.5rem; }
            .service-card { padding: 30px; }
            .cta-section { padding: 40px 20px; }
        }
        /* Simple Interest Calculator CSS */
                .simple-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .simple-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .simple-hero-section h1 span { color: var(--brand-red); }

        .simple-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .simple-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .simple-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .simple-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
            margin-bottom: 20px;
        }
        .simple-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .simple-calculate-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.2rem; text-transform: uppercase;
        }
        .simple-calculate-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .simple-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .simple-res-label { font-size: 0.9rem; text-transform: uppercase; opacity: 0.7; font-weight: 700; letter-spacing: 1px; }
        .simple-res-value { font-size: 3.5rem; font-weight: 800; color: #4cc9f0; margin-bottom: 20px; }

        .simple-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .simple-stat-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px; }
        /* Sitemap Generator CSS */
                .sitemap-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .sitemap-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .sitemap-hero-section h1 span { color: var(--brand-red); }

        .sitemap-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .sitemap-input-label { font-weight: 600; font-size: 0.95rem; color: var(--navy); margin-bottom: 10px; display: block; }
        
        .sitemap-premium-textarea {
            width: 100%; height: 200px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-size: 1rem;
            color: var(--navy); margin-bottom: 20px; transition: 0.3s; resize: none;
        }
        .sitemap-premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        .sitemap-gen-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .sitemap-gen-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .sitemap-result-box {
            margin-top: 30px; display: none; background: #1e293b; color: #94a3b8;
            padding: 20px; border-radius: 12px; font-family: monospace; font-size: 0.85rem;
            position: relative; border-bottom: 5px solid var(--brand-red);
        }

        .sitemap-copy-btn {
            position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1);
            color: white; border: none; padding: 5px 12px; border-radius: 6px; font-size: 0.7rem;
        }
        /* Smaal Business Loan Calculator CSS */
                .small-hero-section { background: white; padding: 50px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .small-hero-section h1 { font-weight: 800; font-size: 2.5rem; color: var(--navy); }
        .small-hero-section h1 span { color: var(--brand-red); }

        .small-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .small-input-group-label { font-weight: 700; font-size: 0.8rem; color: var(--navy); margin-bottom: 6px; display: block; text-transform: uppercase; }
        
        .small-premium-input {
            width: 100%; padding: 12px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 15px; transition: 0.3s;
        }
        .small-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .small-result-panel {
            background: var(--navy); color: white; border-radius: 20px; padding: 30px; margin-top: 20px; text-align: center;
        }
        .small-emi-val { font-size: 3.5rem; font-weight: 800; color: #4ade80; display: block; line-height: 1; }
        .small-emi-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; margin-bottom: 10px; display: block; }

        .small-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .small-stat-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
        .small-stat-box span { display: block; font-size: 0.7rem; opacity: 0.7; }
        .small-stat-box strong { font-size: 1.1rem; }
        /* Sound Converter CSS */
                .sound-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .sound-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .sound-hero-section h1 span { color: var(--brand-red); }

        .sound-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .sound-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .sound-premium-input, .sound-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .sound-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .sound-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .sound-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .sound-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .sound-unit-val { display: block; font-weight: 800; color: var(--text-dark); font-size: 1.1rem; }
        .sound-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .sound-info-box { background: #fff5f5; border-radius: 15px; padding: 20px; margin-top: 30px; border-left: 5px solid var(--brand-red); }
        /* Speed Converter CSS */
                .speed-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .speed-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .speed-hero-section h1 span { color: var(--brand-red); }

        .speed-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .speed-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .speed-premium-input, .speed-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .speed-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .speed-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .speed-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .speed-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .speed-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.3rem; word-break: break-all; }
        .speed-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .speed-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .speed-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Standard Deviation Calculator CSS */
                .satandard-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .satandard-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .satandard-hero-section h1 span { color: var(--brand-red); }

        .satandard-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .satandard-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .satandard-input-label { font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 12px; display: block; }
        .satandard-premium-textarea {
            width: 100%; padding: 20px; border-radius: 15px; border: 2px solid #f1f5f9;
            font-size: 1.1rem; font-weight: 600; color: var(--navy); min-height: 120px;
        }
        .satandard-premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        .satandard-radio-group { display: flex; gap: 20px; margin: 20px 0; }
        .satandard-radio-group label { font-weight: 600; cursor: pointer; }

        .satandard-action-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; transition: 0.3s;
            font-size: 1.1rem; text-transform: uppercase;
        }
        .satandard-action-btn:hover { background: var(--navy); transform: translateY(-3px); }

        .satandard-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red); margin-top: 30px;
        }
        .satandard-sd-value { font-size: 4rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .satandard-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
        .satandard-stat-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; }
        .satandard-stat-label { font-size: 0.8rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; }
        .satandard-stat-val { font-size: 1.3rem; font-weight: 800; }
        /* Statics Calculator CSS */
                .statics-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .statics-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .statics-hero-section h1 span { color: var(--brand-red); }

        .statics-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .statics-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .statics-input-label { font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 12px; display: block; }
        .statics-premium-textarea {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid #f1f5f9;
            font-size: 1.1rem; font-weight: 600; color: var(--navy); min-height: 100px;
        }
        .statics-premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        .statics-action-btn {
            background: var(--brand-red); color: white; border: none; padding: 15px 30px;
            border-radius: 12px; font-weight: 800; width: 100%; margin-top: 20px; transition: 0.3s;
        }
        .statics-action-btn:hover { background: var(--navy); transform: translateY(-2px); }

        .statics-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-top: 30px; }
        
        .statics-stat-box {
            background: var(--navy); color: white; padding: 20px; border-radius: 18px;
            text-align: center; border-bottom: 5px solid var(--brand-red);
        }
        .statics-stat-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.7; font-weight: 700; }
        .statics-stat-value { font-size: 1.8rem; font-weight: 800; color: #4cc9f0; margin-top: 5px; }
        /* Stock Average Calculator CSS */
                .stock-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .stock-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .stock-hero-section h1 span { color: var(--success-green); }

        .stock-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .stock-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
        }

        .stock-trade-box {
            background: #f1f5f9; padding: 20px; border-radius: 16px; margin-bottom: 20px;
            border: 1px dashed #cbd5e1;
        }

        .stock-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 8px; display: block; }
        .stock-premium-input {
            width: 100%; padding: 12px 18px; border-radius: 12px;
            border: 2px solid white; font-weight: 600; font-size: 1.1rem;
        }
        .stock-premium-input:focus { border-color: var(--success-green); outline: none; }

        .stock-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            height: 100%; display: flex; flex-direction: column; justify-content: center;
            text-align: center;
        }
        .stock-avg-price { font-size: 3.5rem; font-weight: 800; color: var(--success-green); margin: 10px 0; }
        
        .stock-stat-line {
            display: flex; justify-content: space-between; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        /* Stp Watch Calculator CSS */
                .stopwatch-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .stopwatch-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .stopwatch-hero-section h1 span { color: var(--brand-red); }

        .stopwatch-container { margin-top: 40px; padding-bottom: 60px; }

        .stopwatch-main-timer-panel {
            background: var(--navy); border-radius: 30px; padding: 50px; color: white;
            text-align: center; border-bottom: 10px solid var(--brand-red);
            box-shadow: 0 25px 50px rgba(29, 53, 87, 0.15);
        }

        .stopwatch-display {
            font-size: 5.5rem; font-weight: 800; color: #4cc9f0;
            font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 30px;
            text-shadow: 0 0 20px rgba(76, 201, 240, 0.3);
        }

        .stopwatch-controls { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
        
        .btn-stopwatch {
            padding: 15px 35px; border-radius: 50px; font-weight: 800;
            text-transform: uppercase; transition: 0.3s; border: none; font-size: 1rem;
        }
        
        .btn-start { background: #06d6a0; color: white; }
        .btn-stop { background: var(--brand-red); color: white; }
        .btn-lap { background: #ffd166; color: #1d3557; }
        .btn-reset { background: rgba(255,255,255,0.1); color: white; }
        
        .btn-stopwatch:hover { transform: scale(1.05); filter: brightness(1.1); }

        .stopwatch-lap-list-container {
            margin-top: 30px; background: white; border-radius: 20px;
            max-height: 300px; overflow-y: auto; border: 1px solid gainsboro;
        }

        .stopwatch-lap-item {
            display: flex; justify-content: space-between; padding: 15px 25px;
            border-bottom: 1px solid gainsboro; font-weight: 600;
        }
        .stopwatch-lap-item:last-child { border-bottom: none; }
        .stopwatch-lap-number { color: var(--brand-red); }
        /* TDEE Calculator CSS */
                .tdee-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .tdee-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .tdee-hero-section h1 span { color: var(--brand-red); }

        .tdee-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .tdee-premium-card {
            background: white; border-radius: 24px; padding: 30px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .gender-btn-group { display: flex; gap: 10px; margin-bottom: 20px; }
        .gender-btn {
            flex: 1; padding: 12px; border: 2px solid #f1f5f9; border-radius: 12px;
            background: white; font-weight: 600; cursor: pointer; transition: 0.3s;
        }
        .gender-btn.active { border-color: var(--tdee-green); background: #f0fff4; color: var(--tdee-green); }

        .tdee-input-group-custom { margin-bottom: 15px; }
        .tdee-input-label { font-weight: 600; font-size: 0.9rem; color: #64748b; margin-bottom: 5px; display: block; }
        .tdee-premium-input {
            width: 100%; padding: 12px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600;
        }

        .tdee-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; position: sticky; top: 20px;
        }
        .tdee-value { font-size: 4rem; font-weight: 800; color: var(--tdee-green); }

        .tdee-goal-box {
            background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px; margin-top: 15px;
            display: flex; justify-content: space-between; align-items: center;
        }
        /* Temperature Converter CSS */
                .temperature-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .temperature-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .temperature-hero-section h1 span { color: var(--brand-red); }

        .temperature-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .temperature-premium-input, .temperature-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .temperature-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .temperature-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .temperature-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .temperature-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .temperature-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.5rem; word-break: break-all; }
        .temperature-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }

        .temperature-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .temperature-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Text To Speech Converter CSS */
                .speech-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .speech-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .speech-hero-section h1 span { color: var(--brand-red); }

        .speech-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .speech-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .speech-premium-textarea {
            width: 100%; height: 200px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none; margin-bottom: 20px;
        }
        .speech-premium-textarea:focus { border-color: var(--brand-red); outline: none; }

        .speech-controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }

        .speech-premium-select, .speech-premium-range {
            width: 100%; padding: 10px; border-radius: 10px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); outline: none;
        }

        .speech-btn-group-custom { display: flex; gap: 10px; }
        
        .speech-action-btn {
            flex: 1; border: none; padding: 18px; border-radius: 15px; 
            font-weight: 800; text-transform: uppercase; transition: 0.3s;
        }
        .speech-play-btn { background: var(--brand-red); color: white; }
        .speech-stop-btn { background: var(--navy); color: white; }
        .speech-action-btn:hover { transform: translateY(-3px); opacity: 0.9; }
        /* Time Converter CSS */
                .time-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .time-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .time-hero-section h1 span { color: var(--brand-red); }

        .time-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .time-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .time-premium-input, .time-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .time-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .time-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .time-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .time-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .time-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .time-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
        /* Time Zone Calculator CSS */
                .timezone-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .timezone-hero-section h1 { font-weight: 800; font-size: 2.8rem; color: var(--navy); }
        .timezone-hero-section h1 span { color: var(--brand-red); }

        .timezone-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .timezone-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .timezone-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
            cursor: pointer; background-color: #fff;
        }
        .timezone-premium-select:focus { border-color: var(--brand-red); outline: none; }

        .timezone-time-display-card {
            background: var(--navy); color: white; border-radius: 15px; padding: 35px;
            text-align: center; margin-top: 20px; border-bottom: 8px solid var(--brand-red);
            box-shadow: 0 15px 30px rgba(29, 53, 87, 0.2);
        }
        .timezone-current-time { font-size: 3.5rem; font-weight: 800; color: #fff; margin: 10px 0; font-variant-numeric: tabular-nums; }
        .timezone-current-date { font-size: 1.2rem; opacity: 0.8; font-weight: 500; letter-spacing: 1px; }

        .timezone-local-info { background: #fff; padding: 15px; border-radius: 12px; border: 1px solid gainsboro; text-align: center; }
        .timezone-local-info span { color: var(--brand-red); font-weight: 800; }
        /* TIP Calculator CSS */
                .tip-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid #e2e8f0;
        }
        .tip-hero-section h1 { font-weight: 800; font-size: 3.2rem; letter-spacing: -1px; }
        .tip-hero-section h1 span { color: var(--brand-red); }

        .tip-premium-card {
            background: white; border-radius: 30px; padding: 40px;
            box-shadow: 0 25px 50px rgba(29, 53, 87, 0.08); margin-top: 40px;
            border: 1px solid #f1f5f9;
        }

        .tip-input-label { font-weight: 600; font-size: 0.9rem; color: #475569; margin-bottom: 8px; display: block; }
        .tip-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid #f1f5f9;
            font-weight: 600; font-size: 1.1rem; transition: 0.3s; margin-bottom: 20px;
        }
        .tip-premium-input:focus { border-color: var(--navy); outline: none; background: #fff; }

        .tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 25px; }
        .tip-option {
            padding: 12px; border: 2px solid #f1f5f9; border-radius: 12px;
            text-align: center; cursor: pointer; font-weight: 700; transition: 0.3s;
        }
        .tip-option.active { background: var(--navy); color: white; border-color: var(--navy); }

        .tip-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.1rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .tip-calc-btn:hover { background: var(--navy); transform: translateY(-2px); }

        .tip-result-panel {
            background: var(--navy); border-radius: 25px; padding: 35px; color: white;
            margin-top: 30px; text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .tip-total-per-person { font-size: 3.8rem; font-weight: 800; color: var(--emerald); line-height: 1; }
        
        .tip-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
        .tip-summary-card { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px; }
        /* Torque Calculator CSS */
                .torque-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .torque-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .torque-hero-section h1 span { color: var(--brand-red); }

        .torque-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .torque-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .torque-premium-input, .premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .torque-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .torque-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .torque-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .torque-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .torque-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .torque-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
        /* Unix Time Stamp Converter CSS */
                .stamp-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .stamp-hero-section h1 { font-weight: 800; font-size: 2.8rem; color: var(--navy); }
        .stamp-hero-section h1 span { color: var(--brand-red); }

        .stamp-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .stamp-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .stamp-premium-input {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s; font-size: 1.2rem;
        }
        .stamp-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .stamp-btn-convert {
            background: var(--brand-red); color: white; border: none; padding: 15px;
            border-radius: 12px; font-weight: 800; width: 100%; text-transform: uppercase; margin-bottom: 25px;
        }

        /* Result Area */
        .stamp-result-panel {
            background: var(--navy); color: white; border-radius: 15px; padding: 25px;
            border-bottom: 6px solid var(--brand-red);
        }
        .stamp-time-box { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .stamp-time-box:last-child { border: none; margin-bottom: 0; padding-bottom: 0; }
        .stamp-time-label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.7; display: block; }
        .stamp-time-val { font-size: 1.2rem; font-weight: 700; color: #fff; }

        .stamp-current-clock { background: #fff; padding: 10px; border-radius: 10px; border: 1px dashed var(--brand-red); margin-bottom: 20px; text-align: center; font-weight: 600; }
        /* URL Encoder & Decoder Calculator CSS */
                .url-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .url-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .url-hero-section h1 span { color: var(--brand-red); }

        .url-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .url-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .url-premium-textarea {
            width: 100%; height: 180px; padding: 15px; border-radius: 12px;
            border: 2px solid gainsboro; font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none; margin-bottom: 20px;
        }
        .url-premium-textarea:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .url-btn-group-custom { display: flex; gap: 15px; margin-bottom: 20px; }
        
        .url-action-btn {
            flex: 1; background: var(--brand-red); color: white; border: none; padding: 15px;
            border-radius: 12px; font-weight: 800; text-transform: uppercase; transition: 0.3s;
        }
        .url-action-btn.secondary { background: var(--navy); }
        .url-action-btn:hover { opacity: 0.9; transform: translateY(-2px); }

        .url-copy-link {
            color: var(--brand-red); font-weight: 700; text-decoration: none; 
            cursor: pointer; font-size: 0.9rem; display: inline-block; margin-top: 10px;
        }

        .url-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .url-info-card h5 { font-weight: 800; color: var(--navy); border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* VAT Calculator CSS */
                /* Hero Section */
        .vat-hero-section {
            background: white;
            padding: 60px 0 80px;
            text-align: center;
            border-bottom: 1px solid gainsboro;
        }
        .vat-hero-section h1 { font-weight: 800; font-size: 3rem; }
        .vat-hero-section h1 span { color: var(--brand-red); }

        /* Main Container */
        .vat-calc-container {
            margin-top: 40px;
            padding-bottom: 60px;
        }

        .vat-premium-card {
            background: white;
            border-radius: 24px;
            padding: 40px;
            border: 1px solid gainsboro;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        /* Toggle Button System */
        .vat-type-toggle {
            display: flex;
            background: #f1f5f9;
            padding: 5px;
            border-radius: 14px;
            margin-bottom: 30px;
        }
        .toggle-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            background: transparent;
            color: #64748b;
        }
        .toggle-btn.active {
            background: white;
            color: var(--brand-red);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        /* Inputs */
        .vat-input-group-custom { margin-bottom: 25px; }
        .vat-input-label { font-weight: 600; font-size: 0.95rem; color: #64748b; margin-bottom: 10px; display: block; }
        .vat-premium-input {
            width: 100%;
            padding: 14px 20px;
            border-radius: 12px;
            border: 2px solid #f1f5f9;
            font-weight: 600;
            font-size: 1.1rem;
            transition: 0.3s;
        }
        .vat-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fffcfc; }

        /* Result Panel */
        .vat-result-panel {
            background: var(--navy);
            border-radius: 24px;
            padding: 40px;
            color: white;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .vat-res-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #cbd5e1; opacity: 0.8; }
        .vat-total-value { font-size: 3.5rem; font-weight: 800; margin: 10px 0; color: white; }
        
        .vat-stat-box {
            background: rgba(255,255,255,0.05);
            padding: 20px;
            border-radius: 16px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .vat-stat-title { font-size: 0.9rem; color: #cbd5e1; }
        .vat-stat-val { font-size: 1.4rem; font-weight: 700; }

        /* Content Section */
        .vat-content-sec { padding: 80px 0; background: white; }
        .vat-content-sec h2 { font-weight: 800; margin-bottom: 20px; }
        .vat-content-sec p { line-height: 1.8; color: #64748b; }
        /* Voltage Converter CSS */
                .voltage-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .voltage-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .voltage-hero-section h1 span { color: var(--brand-red); }

        .voltage-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .voltage-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .voltage-premium-input, .voltage-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .voltage-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .voltage-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .voltage-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .voltage-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .voltage-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .voltage-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
        /* Volume Converter CSS */
                .volume-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .volume-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .volume-hero-section h1 span { color: var(--brand-red); }

        .volume-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .volume-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 8px; display: block; text-transform: uppercase; }
        
        .volume-premium-input, .volume-premium-select {
            width: 100%; padding: 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s;
        }
        .volume-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .volume-results-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px; margin-top: 20px;
        }
        .volume-result-item {
            background: var(--bg-light); padding: 15px; border-radius: 12px;
            border: 1px solid gainsboro; text-align: center; transition: 0.3s;
        }
        .volume-result-item:hover { border-color: var(--brand-red); transform: translateY(-3px); }
        .volume-unit-val { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; word-break: break-all; }
        .volume-unit-name { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
        /* Water Intake Calculator CSS */
                .water-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid var(--border);
        }
        .water-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .water-hero-section h1 span { color: var(--brand-red); }

        .water-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .water-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid var(--border); box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .water-input-group-custom { margin-bottom: 25px; }
        .water-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 10px; display: block; }
        .water-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .water-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .water-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .water-water-value { font-size: 4rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .water-glass-count { font-size: 1.5rem; color: var(--brand-red); font-weight: 700; }

        .water-bottle-container {
            width: 100px; height: 150px; border: 4px solid white; border-radius: 10px 10px 20px 20px;
            margin: 20px auto; position: relative; overflow: hidden;
        }
        .water-water-fill {
            background: var(--water-blue); width: 100%; position: absolute; bottom: 0;
            transition: height 1s ease-in-out;
        }
        /* Website Worth Traffic Checker Calculator CSS */
                .website-hero-section { background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .website-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .website-hero-section h1 span { color: var(--brand-red); }

        .website-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .website-input-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; display: block; text-transform: uppercase; }
        
        .website-premium-input {
            width: 100%; padding: 18px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 20px; transition: 0.3s; font-size: 1.1rem;
        }
        .website-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .website-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.2rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .website-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }

        /* Valuation Result */
        .website-valuation-box {
            display: none; margin-top: 40px; text-align: center;
            padding: 40px; border-radius: 20px; background: var(--navy);
            color: white; border-bottom: 8px solid var(--brand-red);
        }
        .website-price-tag { font-size: 3.5rem; font-weight: 800; color: #fff; display: block; margin: 10px 0; }
        .website-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; }
        .website-stat-item { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 12px; }
        /* Weekly Pay Calculator CSS */
                /* Hero Section */
        .weekly-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .weekly-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .weekly-hero-section h1 span { color: var(--brand-red); }

        /* Main Card */
        .weekly-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .weekly-input-label { font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .weekly-premium-input {
            width: 100%; padding: 12px 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 20px;
            transition: 0.3s;
        }
        .weekly-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .weekly-calc-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.2rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .weekly-calc-btn:hover { background: var(--navy); transform: translateY(-3px); }

        /* Result Panel */
        .weekly-result-panel {
            background: var(--navy); border-radius: 25px; padding: 40px; color: white;
            text-align: center; margin-top: 30px; border-bottom: 8px solid var(--brand-red);
            display: none;
        }
        .weekly-pay-val { font-size: 4rem; font-weight: 800; color: white; line-height: 1; margin: 10px 0; }
        
        .weekly-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; }
        .weekly-summary-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; }
        .weekly-summary-label { font-size: 0.75rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; }
        .weekly-summary-val { font-size: 1.2rem; font-weight: 800; }

        /* Info Section */
        .weekly-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .weekly-info-card h5 { font-weight: 800; color: var(--navy); margin-bottom: 15px; border-left: 5px solid var(--brand-red); padding-left: 15px; }
        /* WHR Calculator CSS */
                .whr-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .whr-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .whr-hero-section h1 span { color: var(--brand-red); }

        .whr-calc-container { margin-top: 40px; padding-bottom: 60px; }

        .whr-premium-card {
            background: white; border-radius: 24px; padding: 35px;
            border: 1px solid gainsboro; box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05);
            height: 100%;
        }

        .gender-btn-group { display: flex; gap: 10px; margin-bottom: 25px; }
        .gender-btn {
            flex: 1; padding: 12px; border: 2px solid #f1f5f9; border-radius: 12px;
            background: white; font-weight: 600; cursor: pointer; transition: 0.3s;
        }
        .gender-btn.active { border-color: var(--brand-red); background: #fff5f5; color: var(--brand-red); }

        .whr-input-group-custom { margin-bottom: 20px; }
        .whr-input-label { font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .whr-premium-input {
            width: 100%; padding: 15px; border-radius: 12px;
            border: 2px solid #f1f5f9; font-weight: 600; font-size: 1.1rem; color: var(--navy);
        }
        .whr-premium-input:focus { border-color: var(--brand-red); outline: none; }

        .whr-result-panel {
            background: var(--navy); border-radius: 24px; padding: 40px; color: white;
            text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .whr-ratio-value { font-size: 4rem; font-weight: 800; color: #4cc9f0; margin: 10px 0; }
        
        .whr-status-badge {
            padding: 12px 25px; border-radius: 50px; font-weight: 700; text-transform: uppercase;
            display: inline-block; margin-top: 20px; font-size: 1rem;
        }
        .bg-low { background: #2ecc71; color: white; }
        .bg-mod { background: #f39c12; color: white; }
        .bg-high { background: var(--brand-red); color: white; }
        /* Word Counter Calculator CSS */
                .word-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .word-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .word-hero-section h1 span { color: var(--brand-red); }

        .word-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        /* Counter Grid */
        .word-counter-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px;
        }
        .word-counter-box {
            background: var(--bg-light); padding: 20px; border-radius: 15px;
            text-align: center; border: 1px solid gainsboro;
        }
        .word-counter-num { font-size: 2rem; font-weight: 800; color: var(--brand-red); display: block; }
        .word-counter-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--navy); opacity: 0.7; }

        .word-premium-textarea {
            width: 100%; height: 300px; padding: 20px; border-radius: 15px;
            border: 2px solid gainsboro; font-size: 1.1rem;
            color: var(--navy); transition: 0.3s; resize: none;
        }
        .word-premium-textarea:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .word-btn-clear {
            background: var(--navy); color: white; border: none; padding: 12px 25px;
            border-radius: 12px; font-weight: 700; margin-top: 15px; transition: 0.3s;
        }
        .word-btn-clear:hover { background: var(--brand-red); transform: translateY(-2px); }

        .word-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .word-info-card h5 { font-weight: 800; color: var(--navy); margin-bottom: 15px; border-left: 5px solid var(--brand-red); padding-left: 15px; }
        /* World Clock Calculator CSS */
                .clock-hero-section {
            background: white; padding: 60px 0 80px; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .clock-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .clock-hero-section h1 span { color: var(--brand-red); }

        .clock-container { margin-top: 40px; padding-bottom: 60px; }

        .clock-card {
            background: white; border-radius: 24px; padding: 25px;
            border: 1px solid gainsboro; box-shadow: 0 15px 35px rgba(29, 53, 87, 0.05);
            text-align: center; transition: 0.3s; height: 100%;
        }
        .clock-card:hover { transform: translateY(-10px); border-color: var(--brand-red); }

        .clock-city-name { font-weight: 800; font-size: 1.4rem; color: var(--navy); margin-bottom: 5px; }
        .clock-country-name { font-size: 0.8rem; color: var(--brand-red); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
        
        .clock-live-time { 
            font-size: 2.2rem; font-weight: 800; color: var(--navy); 
            margin: 15px 0; font-variant-numeric: tabular-nums;
        }
        
        .clock-live-date { font-size: 0.9rem; color: #64748b; font-weight: 500; }

        .clock-local-panel {
            background: var(--navy); color: white; border-radius: 24px; padding: 40px;
            margin-bottom: 40px; text-align: center; border-bottom: 8px solid var(--brand-red);
        }
        .clock-local-time { font-size: 4.5rem; font-weight: 800; color: #4cc9f0; line-height: 1; }
        /* Youtube Money Calculator CSS */
                .youtube-hero-section { background: white; padding: 60px 0; text-align: center; border-bottom: 1px solid gainsboro; }
        .youtube-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .youtube-hero-section h1 span { color: var(--brand-red); }

        .youtube-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .youtube-input-group-label { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 12px; display: block; text-transform: uppercase; }
        
        .youtube-premium-range { width: 100%; accent-color: var(--brand-red); cursor: pointer; height: 8px; border-radius: 5px; margin-bottom: 10px; }

        .youtube-view-display { font-size: 1.5rem; font-weight: 800; color: var(--brand-red); margin-bottom: 25px; }

        .youtube-premium-select {
            width: 100%; padding: 12px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; color: var(--navy); margin-bottom: 25px; outline: none;
        }

        /* Result Panel */
        .youtube-revenue-panel {
            margin-top: 30px; padding: 30px; border-radius: 20px; 
            background: var(--navy); color: white; display: flex; justify-content: space-around;
            border-bottom: 8px solid var(--brand-red);
        }
        .youtube-rev-item { text-align: center; }
        .youtube-rev-val { font-size: 2rem; font-weight: 800; display: block; color: #fff; }
        .youtube-rev-label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; }

        .youtube-info-card { background: white; border-radius: 20px; padding: 30px; border: 1px solid gainsboro; margin-top: 40px; }
        .youtube-info-card h5 { font-weight: 800; border-left: 5px solid var(--brand-red); padding-left: 15px; margin-bottom: 15px; }
        /* Zodiac Sign Finder Calculator CSS */
                .zodiac-hero-section {
            background: white; padding: 70px 0; text-align: center; border-bottom: 1px solid gainsboro;
        }
        .zodiac-hero-section h1 { font-weight: 800; font-size: 3rem; color: var(--navy); }
        .zodiac-hero-section h1 span { color: var(--brand-red); }

        .zodiac-premium-card {
            background: white; border-radius: 24px; padding: 40px;
            box-shadow: 0 20px 40px rgba(29, 53, 87, 0.05); margin-top: 40px;
            border: 1px solid gainsboro;
        }

        .zodiac-input-label { font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 8px; display: block; }
        .zodiac-premium-input {
            width: 100%; padding: 12px 15px; border-radius: 12px; border: 2px solid gainsboro;
            font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 20px;
            transition: 0.3s;
        }
        .zodiac-premium-input:focus { border-color: var(--brand-red); outline: none; background: #fff; }

        .zodiac-find-btn {
            background: var(--brand-red); color: white; border: none; padding: 18px;
            border-radius: 15px; font-weight: 800; width: 100%; font-size: 1.2rem;
            text-transform: uppercase; transition: 0.3s;
        }
        .zodiac-find-btn:hover { background: var(--navy); transform: translateY(-3px); }
/* Add this to your CSS for the spin effect */
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
        /* Result Panel */
        .zodiac-result-panel {
            background: var(--navy); border-radius: 25px; padding: 40px; color: white;
            text-align: center; margin-top: 30px; border-bottom: 8px solid var(--brand-red);
            display: none;
        }
        .zodiac-sign-name { font-size: 3.5rem; font-weight: 800; color: white; line-height: 1; margin: 10px 0; }
        .zodiac-sign-dates { font-size: 1.1rem; opacity: 0.8; font-weight: 400; margin-bottom: 20px; }
        .trait-badge { 
            display: inline-block; background: rgba(255,255,255,0.1); 
            padding: 5px 15px; border-radius: 50px; margin: 5px; font-size: 0.85rem;
        }
        /* Universal Content Secton CSS */
/* ============================================
   GURU'S RESPONSIVE MASTER CSS - CONTENT SECTION
============================================ */
       /* ============================================
           CONTENT SECTION - SEO-RICH TEXT
        ============================================ */
        .content-section {
            padding: 80px 0;
            background: var(--white);
        }

        .content-wrapper {
            max-width: 900px;
            margin: 0 auto;
        }

        .content-wrapper h2 {
            font-size: 2rem;
            font-weight: 800;
            color: var(--navy);
            margin-top: 50px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--brand-red);
        }

        .content-wrapper h2:first-child {
            margin-top: 0;
        }

        .content-wrapper h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--navy);
            margin-top: 35px;
            margin-bottom: 15px;
        }

        .content-wrapper p {
            color: var(--gray-700);
            font-size: 1.05rem;
            margin-bottom: 20px;
            line-height: 1.8;
        }

        .content-wrapper ul,
        .content-wrapper ol {
            color: var(--gray-700);
            margin: 20px 0;
            padding-left: 30px;
        }

        .content-wrapper ul li,
        .content-wrapper ol li {
            margin-bottom: 12px;
            line-height: 1.7;
        }

        .content-wrapper strong {
            color: var(--navy);
            font-weight: 700;
        }

        /* Info Boxes */
        .info-box {
            background: #eff6ff;
            border-left: 4px solid #3b82f6;
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
        }

        .info-box strong {
            color: #1e40af;
            display: block;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .warning-box {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
        }

        .warning-box strong {
            color: #92400e;
            display: block;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .success-box {
            background: #d1fae5;
            border-left: 4px solid #10b981;
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
        }

        .success-box strong {
            color: #065f46;
            display: block;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .danger-box {
            background: #fee2e2;
            border-left: 4px solid #ef4444;
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
        }

        .danger-box strong {
            color: #991b1b;
            display: block;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        /* ============================================
           FAQ SECTION - STRUCTURED DATA READY
        ============================================ */
        .faq-section {
            padding: 80px 0;
            background: var(--gray-50);
        }

        .faq-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 50px;
        }

        .faq-item {
            background: var(--white);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: 0.3s;
        }

        .faq-item:hover {
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            color: var(--navy);
            font-size: 1.1rem;
        }

        .faq-question i { 
            color: var(--brand-red); 
            transition: 0.3s;
            font-size: 1.2rem;
        }

        .faq-answer {
            margin-top: 15px;
            color: var(--gray-600);
            display: none;
            line-height: 1.7;
        }

        .faq-item.active .faq-answer { display: block; }
        .faq-item.active .faq-question i { transform: rotate(180deg); }

        /* ============================================
           RELATED TOOLS - INTERNAL LINKING
        ============================================ */
        .mega-related-section {
            background: var(--white);
            padding: 80px 0;
        }

        .section-main-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 50px;
        }
        .mega-brand-card {
            background: var(--white); border-radius: 24px; padding: 30px; text-align: center; border: 1px solid #e2e8f0;
            transition: 0.3s; text-decoration: none; color: inherit; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
        }

        .mega-brand-card:hover { border-color: var(--brand-red); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(29, 53, 87, 0.08); }

        .brand-icon-box { width: 60px; height: 60px; background: #fdf2f2; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--brand-red); font-size: 1.8rem; }
        .mega-brand-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
        .mega-brand-card p { font-size: 0.9rem; color: #64748b; margin-bottom: 0; }


        /* ============================================
           FOOTER - CONSISTENT ACROSS ALL PAGES
        ============================================ */
        footer {
            background: var(--navy);
            color: white;
            padding: 50px 0 30px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-section h4 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: white;
        }

        .footer-section p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .footer-section ul {
            list-style: none;
            padding: 0;
        }

        .footer-section ul li {
            margin-bottom: 12px;
        }

        .footer-section ul li a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: 0.3s;
        }

        .footer-section ul li a:hover {
            color: var(--brand-red);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 30px;
            text-align: center;
            color: rgba(255, 255, 255, 0.6);
        }

        /* ============================================
           RESPONSIVE DESIGN
        ============================================ */
        @media (max-width: 768px) {
            .hero-section h1 { font-size: 2rem; }
            .calculator-card { padding: 30px 20px; }
            .content-wrapper h2 { font-size: 1.6rem; }
            .content-wrapper h3 { font-size: 1.3rem; }
            .faq-title, .section-main-title { font-size: 2rem; }
        }



        /*header responsive css*/
        /* Mobile Responsive Logic */
    @media (max-width: 576px) {
        .nav-link-back {
            padding: 10px 15px; /* Button chota ho jayega */
        }
        .logo {
            font-size: 1.4rem; /* Logo thora chota ho jayega */
        }
    }
        /* Footer */
        footer { 
            background: var(--navy); 
            color: white; 
            padding: 60px 0 30px; 
            margin-top: 80px; 
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-section h4 {
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--brand-red);
        }
        
        .footer-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .footer-section ul li {
            margin-bottom: 12px;
        }
        
        .footer-section ul li a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: 0.3s;
        }
        
        .footer-section ul li a:hover {
            color: var(--brand-red);
            padding-left: 5px;
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 30px;
            text-align: center;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: 0.3s;
        }
        
        .social-links a:hover {
            background: var(--brand-red);
            transform: translateY(-3px);
        }