/* General Homepage Styles */
        :root {
            --dtc-primary: #2563eb;
            --dtc-primary-dark: #1d4ed8;
            --dtc-secondary: #7c3aed;
            --dtc-accent: #06b6d4;
            --dtc-light: #f8fafc;
            --dtc-gray: #64748b;
            --dtc-dark: #1e293b;
            --dtc-gradient: linear-gradient(135deg, var(--dtc-primary) 0%, var(--dtc-secondary) 100%);
        }

        body {
            font-family: 'Inter', sans-serif; /* Using Inter for consistency */
        }

        /* Hero Section */
        .dtc-home-hero {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 6rem 0;
            position: relative;
            overflow: hidden;
        }

        .dtc-home-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
            opacity: 0.5;
        }

        .dtc-home-hero-content {
            position: relative;
            z-index: 2;
        }

        .dtc-home-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--dtc-dark);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .dtc-home-hero p {
            font-size: 1.25rem;
            color: var(--dtc-gray);
            margin-bottom: 2rem;
            max-width: 700px; /* Increased max-width slightly for better flow */
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Tools Section */
        .dtc-home-tools {
            padding: 5rem 0;
            background: white;
        }

        .dtc-home-tool-card {
            background: white;
            border-radius: 1rem;
            padding: 2rem;
            text-align: center;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .dtc-home-tool-card p {
            flex-grow: 1;
        }

        .dtc-home-tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border-color: var(--dtc-primary);
        }

        .dtc-home-tool-icon {
            width: 4rem;
            height: 4rem;
            background: var(--dtc-gradient);
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: white;
            font-size: 1.5rem;
        }

        .dtc-home-tool-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--dtc-dark);
        }

        .dtc-home-tool-card p {
            color: var(--dtc-gray);
            margin-bottom: 1.5rem;
        }

        .dtc-home-tool-btn {
            background: transparent;
            border: 2px solid var(--dtc-primary);
            color: var(--dtc-primary);
            padding: 0.5rem 1.5rem;
            border-radius: 2rem;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            margin-top: auto; /* Pushes button to the bottom */
        }

        .dtc-home-tool-btn:hover {
            background: var(--dtc-primary);
            color: white;
        }

        /* Benefits Section */
        .dtc-home-benefits {
            padding: 5rem 0;
            background: var(--dtc-light);
        }

        .dtc-home-benefit-item {
            text-align: center;
            padding: 2rem 1rem;
        }

        .dtc-home-benefit-icon {
            width: 5rem;
            height: 5rem;
            background: var(--dtc-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: white;
            font-size: 2rem;
        }

        .dtc-home-benefit-item h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--dtc-dark);
        }

        .dtc-home-benefit-item p {
            color: var(--dtc-gray);
            font-size: 1.1rem;
        }

        /* Testimonials Section */
        .dtc-home-testimonials {
            padding: 5rem 0;
            background: white;
        }

        .dtc-home-testimonial-card {
            background: white;
            border-radius: 1rem;
            padding: 2rem;
            border: 1px solid #e2e8f0;
            text-align: center;
            margin: 1rem 0; /* Adjusted margin for better spacing */
            transition: all 0.3s ease;
            height: 100%;
        }

        .dtc-home-testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .dtc-home-testimonial-avatar {
            width: 4rem;
            height: 4rem;
            background: var(--dtc-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .dtc-home-testimonial-text {
            font-style: italic;
            color: var(--dtc-gray);
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .dtc-home-testimonial-author {
            font-weight: 600;
            color: var(--dtc-dark);
        }

        .dtc-home-testimonial-role {
            color: var(--dtc-gray);
            font-size: 0.9rem;
        }

        /* CTA Section */
        .dtc-home-cta-section {
            padding: 5rem 0;
            background: var(--dtc-gradient);
            color: white;
            text-align: center;
        }

        .dtc-home-cta-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .dtc-home-cta-section p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .dtc-home-cta-large-btn {
            background: white;
            color: var(--dtc-primary);
            border: none;
            padding: 1.25rem 3.5rem;
            border-radius: 3rem;
            font-weight: 600;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .dtc-home-cta-large-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255, 255, 255, 0.3);
            color: var(--dtc-primary);
        }

        /* Responsive Design */
        @media (max-width: 991px) {
            .dtc-home-hero h1 {
                font-size: 2.8rem;
            }
        }
        
        @media (max-width: 768px) {
            .dtc-home-hero {
                padding: 4rem 0;
            }
            .dtc-home-hero h1 {
                font-size: 2.5rem;
            }
            
            .dtc-home-hero p {
                font-size: 1.1rem;
            }
            
            .dtc-home-cta-section h2 {
                font-size: 2rem;
            }
        }
        
        /* Time Calculator Styles */
        #wkc-time-calculator-app {
            --dtc-primary: #3b82f6;
            --dtc-secondary: #6366f1;
            --wkc-accent-bg: #eff6ff;
            --wkc-bg-card: #ffffff;
            --wkc-bg-control-hover: #f3f4f6;
            --wkc-text-primary: #1f2937;
            --wkc-text-secondary: #4b5563;
            --wkc-text-on-accent: #ffffff;
            --wkc-border: #e5e7eb;
            --wkc-border-hover: #d1d5db;
            --wkc-success: #22C55E;
            --wkc-radius-md: 0.75rem;
            --wkc-radius-lg: 1rem;
            --wkc-radius-xl: 1.25rem;
            --wkc-shadow-glow: 0 0 0 3px rgba(59, 130, 246, 0.25);
            --wkc-shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
            --wkc-shadow-btn: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --wkc-shadow-btn-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --wkc-font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --wkc-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            
            font-family: var(--wkc-font-main);
            color: var(--wkc-text-primary);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            
            
            max-width: 1224px !important;
            margin: 2rem auto;
            background-color: var(--wkc-bg-card);
            border-radius: 22px;
            box-shadow: 0 1px 11px rgb(96 112 166 / 97%);
            border: 1px solid var(--wkc-border);
            overflow: hidden;

        }

        #wkc-time-calculator-app *,
        #wkc-time-calculator-app *::before,
        #wkc-time-calculator-app *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border-width: 0; /* Reset borders within the app */
        }
        
        #wkc-time-calculator-app .wkc-main-grid { display: grid; grid-template-columns: 1fr; }
        
        @media (min-width: 1024px) {
            #wkc-time-calculator-app .wkc-main-grid { grid-template-columns: 1fr 1fr; }
        }

        #wkc-time-calculator-app .wkc-controls-panel { 
            background: linear-gradient(289deg, #82a0cbbf, #7072bbd1);
            padding: 1.5rem; display: grid; gap: 1.5rem; align-content: start; 
        }
        
        #wkc-time-calculator-app .wkc-results-panel {
            padding: 1.5rem;
            background: linear-gradient(45deg, #8692ebd1, #c9dee7d1);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 350px;
        }
        
        #wkc-time-calculator-app .wkc-control-group {
            background: #fbfbfbad;
            padding: 1.25rem;
            border-radius: var(--wkc-radius-lg);
            border: 1px solid #a0a0e5;
        }
        #wkc-time-calculator-app .wkc-control-group h2 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--wkc-text-primary);
            line-height: 1.2;
        }

        #wkc-time-calculator-app .wkc-mode-switcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
        #wkc-time-calculator-app .wkc-mode-btn {
            background-color: var(--wkc-bg-card);
            border: 1px solid var(--wkc-border);
            border-radius: var(--wkc-radius-md);
            padding: 0.75rem;
            color: var(--wkc-text-secondary);
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all var(--wkc-transition-fast);
            box-shadow: var(--wkc-shadow-btn);
        }
        
        #wkc-time-calculator-app .wkc-mode-btn:hover { background-color: var(--wkc-bg-control-hover); border-color: var(--wkc-border-hover); transform: translateY(-2px); box-shadow: var(--wkc-shadow-btn-hover); }
        #wkc-time-calculator-app .wkc-mode-btn.active { background-color: var(--dtc-primary); color: var(--wkc-text-on-accent); border-color: var(--dtc-primary); box-shadow: var(--wkc-shadow-btn-hover); transform: translateY(-2px); }
        #wkc-time-calculator-app .wkc-mode-btn svg { width: 1rem; height: 1rem; }
        
        #wkc-time-calculator-app .wkc-input-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
        #wkc-time-calculator-app .wkc-input-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
        /* This auto-fit pattern is already responsive and will wrap columns on smaller screens */
        #wkc-time-calculator-app .wkc-input-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }

        #wkc-time-calculator-app .wkc-input-group { display: flex; flex-direction: column; gap: 0.5rem; }
        #wkc-time-calculator-app .wkc-label { font-size: 0.8rem; font-weight: 500; color: var(--wkc-text-secondary); }
        #wkc-time-calculator-app .wkc-input {
            text-align: center;
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d0d0fc;
            border-radius: var(--wkc-radius-md);
            background-color: var(--wkc-bg-card);
            font-family: inherit;
            font-size: 0.9rem;
            transition: border-color var(--wkc-transition-fast), box-shadow var(--wkc-transition-fast);
        }
        #wkc-time-calculator-app .wkc-input:focus { outline: none; border-color: var(--dtc-primary); box-shadow: var(--wkc-shadow-glow); }

        #wkc-time-calculator-app .wkc-action-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 0.5rem; }
        #wkc-time-calculator-app .wkc-btn { padding: 0.75rem; font-weight: 600; border-radius: var(--wkc-radius-md); border: 1px solid var(--wkc-border); cursor: pointer; transition: all var(--wkc-transition-fast); display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: var(--wkc-shadow-btn); }
        #wkc-time-calculator-app .wkc-btn:hover { transform: translateY(-2px); box-shadow: var(--wkc-shadow-btn-hover); }
        #wkc-time-calculator-app .wkc-btn-secondary { background-color: var(--wkc-bg-card); color: var(--wkc-text-secondary); }
        #wkc-time-calculator-app .wkc-btn-secondary:hover { border-color: var(--wkc-border-hover); }
        #wkc-time-calculator-app .wkc-btn-primary { background-color: var(--dtc-primary); color: var(--wkc-text-on-accent); border-color: var(--dtc-primary); }
        #wkc-time-calculator-app .wkc-btn-primary:hover { background-color: var(--dtc-secondary); border-color: var(--dtc-secondary); }
        
        #wkc-time-calculator-app .wkc-result-content { text-align: center; width: 100%; }
        #wkc-time-calculator-app .wkc-result-icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 auto 1.5rem auto; border-radius: 50%; background: linear-gradient(135deg, var(--dtc-primary), var(--dtc-secondary)); color: var(--wkc-text-on-accent); box-shadow: var(--wkc-shadow-btn-hover); }
        #wkc-time-calculator-app .wkc-result-icon svg { width: 2rem; height: 2rem; }
        
        #wkc-time-calculator-app .wkc-duration-display { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
        #wkc-time-calculator-app .wkc-duration-item { background-color: var(--wkc-bg-card); padding: 1rem; border-radius: var(--wkc-radius-lg); border: 1px solid var(--wkc-border); }
        #wkc-time-calculator-app .wkc-duration-value { font-size: 1.5rem; font-weight: 700; }
        #wkc-time-calculator-app .wkc-duration-label { font-size: 0.8rem; color: var(--wkc-text-secondary); }

        #wkc-time-calculator-app .wkc-result-primary {
           font-size: 2.5rem;
            font-weight: 700;
            font-family: 'Inter', monospace;
            letter-spacing: -1px;
            color: var(--wkc-text-primary);
            margin-bottom: 0.75rem;
            font-variant-numeric: tabular-nums;
            line-height: 1.4;
        }
        #wkc-time-calculator-app .wkc-result-primary span { display: inline-block; }
        #wkc-time-calculator-app .wkc-result-secondary {
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--wkc-text-secondary);
            margin-top: 0.25rem;
            line-height: 1.4;
        }
        @media (min-width: 640px) {
            #wkc-time-calculator-app .wkc-result-primary { font-size: 3.5rem; }
        }

        @keyframes wkc-digit-flip {
            0% { opacity: 0; transform: translateY(0.5em) scale(0.9); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        #wkc-time-calculator-app .animate-flip { animation: wkc-digit-flip 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

        @media screen and (max-width: 480px) {
            #wkc-time-calculator-app {
                margin: 0;
                border-radius: 0;
                border: none;
                box-shadow: none;
            }

            #wkc-time-calculator-app .wkc-controls-panel,
            #wkc-time-calculator-app .wkc-results-panel {
                padding: 1rem; 
            }
            
            #wkc-time-calculator-app .wkc-results-panel {
                 min-height: 280px; 
            }
            
            #wkc-time-calculator-app .wkc-control-group {
                padding: 1rem; 
            }
            
            #wkc-time-calculator-app .wkc-control-group h2 {
                font-size: 1rem;
                margin-bottom: 0.75rem;
            }
            
            #wkc-time-calculator-app .wkc-input-grid.cols-2 {
                grid-template-columns: 1fr;
            }

            #wkc-time-calculator-app .wkc-mode-btn {
                padding: 0.6rem;
                font-size: 0.75rem; 
            }
            
            #wkc-time-calculator-app .wkc-result-primary {
                font-size: 2.1rem;
                letter-spacing: -0.025em;
            }
            
            #wkc-time-calculator-app .wkc-result-secondary {
                font-size: 0.9rem; 
            }
            
            #wkc-time-calculator-app .wkc-duration-display {
                 gap: 0.75rem;
                 margin-top: 1rem;
            }
            
            #wkc-time-calculator-app .wkc-duration-item {
                padding: 0.75rem; 
            }
            
            #wkc-time-calculator-app .wkc-duration-value {
                font-size: 1.25rem;
            }
            
            #wkc-time-calculator-app .wkc-duration-label {
                font-size: 0.7rem; 
            }
        }