diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 5bf021b..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,4122 +0,0 @@
-/* ================================================================
- Quantum Tasks AI - Static Website Styles
- ================================================================ */
-
-/* CSS Custom Properties - Design System */
-:root {
- /* ===== SPACING SYSTEM ===== */
- --space-xs: 4px;
- --space-sm: 8px;
- --space-md: 16px;
- --space-lg: 24px;
- --space-xl: 32px;
- --space-xxl: 48px;
- --space-xxxl: 64px;
-
- /* ===== COLOR PALETTE ===== */
- --primary: #3b82f6;
- --primary-dark: #1d4ed8;
- --primary-light: #60a5fa;
-
- --success: #10b981;
- --success-dark: #059669;
- --error: #ef4444;
- --warning: #f59e0b;
- --info: #06b6d4;
-
- --surface: #ffffff;
- --surface-variant: #f8fafc;
- --background: #f3f4f6;
- --background-light: #f9fafb;
-
- --on-surface: #1a1a1a;
- --on-surface-variant: #6b7280;
- --text-primary: var(--on-surface);
- --text-secondary: var(--on-surface-variant);
- --text-muted: #9ca3af;
-
- --outline: #e4e7eb;
- --outline-variant: #e1e4e7;
- --border-light: #e5e7eb;
- --border-medium: #9ca3af;
- --border-strong: #6b7280;
-
- /* ===== BORDER RADIUS ===== */
- --radius-xs: 4px;
- --radius-sm: 8px;
- --radius-md: 12px;
- --radius-lg: 16px;
- --radius-xl: 24px;
- --radius-full: 9999px;
-
- /* ===== SHADOWS ===== */
- --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
- --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
- --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
- --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
-
- /* ===== TYPOGRAPHY ===== */
- --font-family: 'Inter', Arial, sans-serif;
- --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-
- --text-xs: 12px;
- --text-sm: 14px;
- --text-base: 16px;
- --text-lg: 18px;
- --text-xl: 20px;
- --text-2xl: 24px;
- --text-3xl: 30px;
- --text-4xl: 36px;
-
- --font-light: 300;
- --font-normal: 400;
- --font-medium: 500;
- --font-semibold: 600;
- --font-bold: 700;
-
- --leading-tight: 1.25;
- --leading-normal: 1.5;
- --leading-relaxed: 1.75;
-
- /* ===== TRANSITIONS ===== */
- --transition: all 0.2s ease;
- --transition-fast: all 0.1s ease;
- --transition-slow: all 0.3s ease;
-
- /* ===== GRADIENTS ===== */
- --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
- --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
- --gradient-hero: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%);
- --company-gradient: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
- --visual-gradient: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
- --services-gradient: linear-gradient(135deg, #fefefe 0%, #f0f9ff 100%);
- --clients-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
- --founder-gradient: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
- --contact-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
- --text-gradient: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
- --badge-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
- --badge-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
- --blog-hero-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
- --blog-card-gradient: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
- --newsletter-gradient: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%);
-
- /* ===== HEADER VARIABLES ===== */
- --header-height: 84px;
- --header-bg: #ffffff;
- --header-border: #e5e7eb;
- --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
- --logo-height: 60px;
- --logo-height-mobile: 40px;
- --nav-text: #6b7280;
- --nav-text-hover: #3b82f6;
- --nav-text-active: #1d4ed8;
-
- /* ===== Z-INDEX SCALE ===== */
- --z-dropdown: 1000;
- --z-sticky: 1020;
- --z-fixed: 1030;
- --z-modal-backdrop: 1040;
- --z-modal: 1050;
- --z-popover: 1060;
- --z-tooltip: 1070;
- --z-toast: 1080;
-}
-
-/* ================================================================
- GLOBAL STYLES
- ================================================================ */
-
-* {
- box-sizing: border-box;
-}
-
-body {
- font-family: var(--font-family);
- margin: 0;
- padding: 0;
- background-color: var(--background);
- overflow-x: hidden;
- line-height: var(--leading-normal);
- color: var(--text-primary);
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- font-optical-sizing: auto;
- font-variant-ligatures: common-ligatures contextual;
-}
-
-
-/* ================================================================
- HERO SECTIONS
- ================================================================ */
-
-.hero, .digital-branding-hero, .contact-hero {
- position: relative;
- background: var(--gradient-hero);
- overflow: hidden;
- min-height: 85vh;
- display: flex;
- align-items: center;
- padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px);
-}
-
-.contact-hero {
- min-height: 50vh;
-}
-
-.hero-container {
- max-width: 1280px;
- margin: 0 auto;
- text-align: center;
- position: relative;
- z-index: 10;
- width: 100%;
-}
-
-.trust-badge {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: rgba(59, 130, 246, 0.08);
- padding: 0.5rem 1.25rem;
- border-radius: 50px;
- margin-bottom: 2.5rem;
- font-size: var(--text-sm);
- font-weight: var(--font-semibold);
- color: var(--primary);
- border: 1px solid rgba(59, 130, 246, 0.15);
- backdrop-filter: blur(10px);
-}
-
-.trust-badge-emoji {
- font-size: 0.75rem;
-}
-
-.section-badge {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: rgba(59, 130, 246, 0.08);
- padding: 0.5rem 1.25rem;
- border-radius: 50px;
- margin-bottom: 1.5rem;
- font-size: var(--text-sm);
- font-weight: var(--font-semibold);
- color: var(--primary);
- border: 1px solid rgba(59, 130, 246, 0.15);
- backdrop-filter: blur(10px);
-}
-
-.hero-title {
- font-weight: 800;
- margin-bottom: 2.5rem;
- line-height: var(--leading-tight);
- letter-spacing: -0.02em;
- font-size: clamp(36px, 8vw, 110px);
- margin-bottom: clamp(24px, 6vw, 40px);
-}
-
-.hero-title-gradient {
- background: var(--gradient-primary);
- background-size: 300% 300%;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.hero-title-normal {
- color: var(--text-primary);
-}
-
-.hero-description {
- color: var(--text-secondary);
- margin-bottom: 3.5rem;
- max-width: 720px;
- margin-left: auto;
- margin-right: auto;
- line-height: var(--leading-relaxed);
- font-weight: var(--font-normal);
- font-size: clamp(1.1rem, 3vw, 1.4rem);
- margin-bottom: clamp(32px, 8vw, 56px);
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.hero-buttons {
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- margin-bottom: 5rem;
- gap: clamp(12px, 3vw, 20px);
- margin-bottom: clamp(40px, 10vw, 80px);
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-/* ================================================================
- BUTTONS
- ================================================================ */
-
-.btn-primary {
- background: var(--gradient-primary);
- color: white;
- border-radius: 1rem;
- font-weight: var(--font-bold);
- border: none;
- cursor: pointer;
- box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
- letter-spacing: 0.01em;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
- font-size: clamp(14px, 3.5vw, 18px);
- min-height: 48px;
- min-width: clamp(140px, 40vw, 180px);
- transition: var(--transition);
-}
-
-.btn-primary:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
- filter: brightness(1.1);
-}
-
-.btn-primary:active {
- transform: translateY(0);
- box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
-}
-
-.btn-secondary {
- background: var(--surface);
- color: var(--primary);
- border-radius: 1rem;
- font-weight: var(--font-semibold);
- border: 2px solid var(--border-light);
- text-decoration: none;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(59, 130, 246, 0.08);
- letter-spacing: 0.01em;
- display: inline-block;
- text-align: center;
- padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
- font-size: clamp(14px, 3.5vw, 18px);
- min-height: 48px;
- min-width: clamp(140px, 40vw, 180px);
- transition: var(--transition);
-}
-
-.btn-secondary:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
- border-color: var(--primary);
- background: rgba(59, 130, 246, 0.05);
-}
-
-.btn-secondary:active {
- transform: translateY(0);
- box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
-}
-
-/* ================================================================
- TRUST INDICATORS
- ================================================================ */
-
-.trust-indicators {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
- gap: clamp(16px, 4vw, 48px);
- max-width: 600px;
- margin: 0 auto;
-}
-
-.trust-card {
- background: rgba(255, 255, 255, 0.7);
- padding: clamp(20px, 6vw, 32px) clamp(16px, 4vw, 24px);
- border-radius: var(--radius-lg);
- text-align: center;
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.2);
- box-shadow: var(--shadow-sm);
- transition: var(--transition);
-}
-
-.trust-card:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-lg);
-}
-
-.trust-number {
- font-size: clamp(24px, 6vw, 36px);
- font-weight: var(--font-bold);
- color: var(--primary);
- margin-bottom: 0.5rem;
- line-height: 1;
-}
-
-.trust-text {
- font-size: clamp(12px, 3vw, 14px);
- color: var(--text-secondary);
- font-weight: var(--font-medium);
- line-height: var(--leading-tight);
-}
-
-/* ================================================================
- SECTIONS
- ================================================================ */
-
-.section-container {
- max-width: 1200px;
- margin: 0 auto;
- padding: clamp(40px, 8vw, 80px) clamp(16px, 4vw, 24px);
-}
-
-.section-header {
- text-align: center;
- margin-bottom: clamp(40px, 8vw, 64px);
-}
-
-.section-title {
- font-size: clamp(28px, 6vw, 48px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin: 0 0 1rem 0;
- line-height: var(--leading-tight);
-}
-
-.section-subtitle {
- font-size: clamp(16px, 4vw, 20px);
- color: var(--text-secondary);
- max-width: 600px;
- margin: 0 auto;
- line-height: var(--leading-relaxed);
-}
-
-/* ================================================================
- COMPANY PROFILE SECTION
- ================================================================ */
-
-.company-profile {
- padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px);
- background: var(--company-gradient);
-}
-
-.company-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.company-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: clamp(40px, 8vw, 80px);
- align-items: center;
- margin-bottom: clamp(40px, 8vw, 64px);
-}
-
-.company-content-card {
- background: var(--surface);
- padding: clamp(32px, 6vw, 48px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-lg);
- position: relative;
-}
-
-.decorative-corner {
- position: absolute;
- top: -10px;
- right: -10px;
- width: 60px;
- height: 60px;
- background: var(--gradient-primary);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 24px;
- box-shadow: var(--shadow-lg);
-}
-
-.company-content-title {
- font-size: clamp(22px, 5vw, 32px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 1rem;
- line-height: var(--leading-tight);
-}
-
-.company-content-text {
- color: var(--text-secondary);
- line-height: var(--leading-relaxed);
- margin-bottom: 2rem;
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-.company-badges {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
- margin-bottom: 1rem;
-}
-
-.company-badge {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.5rem 1rem;
- border-radius: var(--radius-full);
- font-size: var(--text-sm);
- font-weight: var(--font-medium);
- color: white;
-}
-
-.company-badge-primary {
- background: var(--gradient-primary);
-}
-
-.company-badge-purple {
- background: var(--badge-purple);
-}
-
-.company-badge-orange {
- background: var(--badge-orange);
-}
-
-.company-visual {
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- height: 300px;
-}
-
-.main-visual {
- width: 200px;
- height: 200px;
- background: var(--visual-gradient);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- box-shadow: var(--shadow-xl);
-}
-
-.main-visual-icon {
- font-size: 80px;
- color: white;
-}
-
-.floating-element {
- position: absolute;
- width: 60px;
- height: 60px;
- background: var(--surface);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 24px;
- box-shadow: var(--shadow-lg);
- animation: float 6s ease-in-out infinite;
-}
-
-.floating-element-1 {
- top: 20px;
- left: 20px;
- animation-delay: 0s;
-}
-
-.floating-element-2 {
- bottom: 20px;
- right: 20px;
- animation-delay: 3s;
-}
-
-@keyframes float {
- 0%, 100% { transform: translateY(0px); }
- 50% { transform: translateY(-20px); }
-}
-
-.achievement-strip {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: clamp(16px, 4vw, 32px);
- background: var(--surface);
- padding: clamp(24px, 5vw, 40px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-sm);
-}
-
-.achievement-item {
- text-align: center;
-}
-
-.achievement-icon {
- font-size: 32px;
- margin-bottom: 0.5rem;
-}
-
-.achievement-title {
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 0.25rem;
-}
-
-.achievement-text {
- color: var(--text-secondary);
- font-size: var(--text-sm);
-}
-
-/* ================================================================
- SERVICES SECTION
- ================================================================ */
-
-.services {
- padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px);
- background: var(--services-gradient);
-}
-
-.services-container {
- max-width: 1200px;
- margin: 0 auto;
- text-align: center;
-}
-
-.services-title {
- font-size: clamp(28px, 6vw, 48px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 1rem;
-}
-
-.services-subtitle {
- font-size: clamp(16px, 4vw, 20px);
- color: var(--text-secondary);
- margin-bottom: clamp(40px, 8vw, 64px);
-}
-
-.services-grid, .branding-services-grid, .why-choose-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: clamp(24px, 5vw, 40px);
-}
-
-.service-card, .choice-card {
- background: var(--surface);
- padding: clamp(32px, 6vw, 40px);
- border-radius: var(--radius-xl);
- text-align: center;
- box-shadow: var(--shadow-sm);
- transition: var(--transition);
- border: 1px solid var(--border-light);
-}
-
-.service-card:hover, .choice-card:hover {
- transform: translateY(-4px);
- box-shadow: var(--shadow-lg);
-}
-
-.service-icon, .choice-icon {
- font-size: 48px;
- margin-bottom: 1.5rem;
- display: block;
-}
-
-.service-title, .choice-title {
- font-size: clamp(18px, 4vw, 24px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 1rem;
-}
-
-.service-description, .choice-description {
- color: var(--text-secondary);
- line-height: var(--leading-relaxed);
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-/* ================================================================
- CLIENTS SECTION
- ================================================================ */
-
-.clients {
- padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px);
- background: var(--clients-gradient);
-}
-
-.clients-container {
- max-width: 1200px;
- margin: 0 auto;
- text-align: center;
-}
-
-.clients-title {
- font-size: clamp(28px, 6vw, 48px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: clamp(40px, 8vw, 64px);
-}
-
-.clients-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: clamp(24px, 5vw, 32px);
-}
-
-.client-card {
- background: var(--surface);
- padding: clamp(24px, 5vw, 32px);
- border-radius: var(--radius-lg);
- text-align: center;
- box-shadow: var(--shadow-sm);
- transition: var(--transition);
- border: 1px solid var(--border-light);
-}
-
-.client-card:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-md);
-}
-
-.client-icon {
- font-size: 40px;
- margin-bottom: 1rem;
-}
-
-.client-name {
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 0.5rem;
- font-size: clamp(16px, 4vw, 20px);
-}
-
-.client-industry {
- color: var(--text-secondary);
- font-size: var(--text-sm);
-}
-
-/* ================================================================
- FOUNDER SECTION
- ================================================================ */
-
-.founder {
- padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px);
- background: var(--surface);
-}
-
-.founder-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.founder-title {
- text-align: center;
- font-size: clamp(28px, 6vw, 48px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: clamp(40px, 8vw, 64px);
-}
-
-.founder-grid {
- display: grid;
- grid-template-columns: 300px 1fr;
- gap: clamp(40px, 8vw, 64px);
- align-items: center;
- margin-bottom: 3rem;
-}
-
-.founder-card {
- background: var(--founder-gradient);
- color: white;
- padding: clamp(32px, 6vw, 40px);
- border-radius: var(--radius-xl);
- text-align: center;
- box-shadow: var(--shadow-lg);
-}
-
-.founder-avatar {
- width: 80px;
- height: 80px;
- margin-bottom: 1rem;
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
- border-radius: 12px;
- border: 2px solid rgba(255, 255, 255, 0.3);
- margin-left: auto;
- margin-right: auto;
-}
-
-.avatar-initials {
- font-size: 24px;
- font-weight: 700;
- color: white;
- letter-spacing: 1px;
-}
-
-.founder-name {
- font-size: clamp(20px, 5vw, 24px);
- font-weight: var(--font-bold);
- margin-bottom: 0.5rem;
-}
-
-.founder-role {
- font-size: var(--text-sm);
- opacity: 0.9;
- margin-bottom: 1.5rem;
-}
-
-.founder-badges {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.founder-badge {
- background: rgba(255, 255, 255, 0.2);
- padding: 0.5rem 0.75rem;
- border-radius: var(--radius-sm);
- font-size: var(--text-xs);
- font-weight: var(--font-medium);
-}
-
-.founder-content {
- max-width: none;
-}
-
-.founder-text {
- color: var(--text-secondary);
- line-height: var(--leading-relaxed);
- margin-bottom: 1.5rem;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.founder-quote {
- background: var(--surface-variant);
- padding: clamp(20px, 4vw, 24px);
- border-radius: var(--radius-lg);
- border-left: 4px solid var(--primary);
- margin-top: 1.5rem;
-}
-
-.founder-quote-text {
- color: var(--text-primary);
- font-style: italic;
- margin: 0;
- font-weight: var(--font-medium);
-}
-
-/* ================================================================
- PROCESS SECTION
- ================================================================ */
-
-.our-process {
- padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px);
- background: var(--surface-variant);
-}
-
-.process-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: clamp(24px, 5vw, 32px);
- margin-bottom: clamp(40px, 8vw, 64px);
-}
-
-.process-step-card {
- background: var(--surface);
- padding: clamp(24px, 5vw, 32px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-sm);
- transition: var(--transition);
- border: 1px solid var(--border-light);
- display: flex;
- align-items: flex-start;
- gap: 1rem;
-}
-
-.process-step-card:hover {
- transform: translateY(-4px);
- box-shadow: var(--shadow-lg);
-}
-
-.step-number {
- background: var(--gradient-primary);
- color: white;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: var(--font-bold);
- font-size: var(--text-lg);
- flex-shrink: 0;
-}
-
-.step-content {
- flex: 1;
-}
-
-.step-title {
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 0.75rem;
- font-size: clamp(16px, 4vw, 20px);
-}
-
-.step-description {
- color: var(--text-secondary);
- line-height: var(--leading-relaxed);
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-/* RACE Framework */
-.race-framework {
- background: var(--surface);
- padding: clamp(32px, 6vw, 48px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-sm);
-}
-
-.race-title {
- text-align: center;
- font-size: clamp(24px, 5vw, 32px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: clamp(24px, 5vw, 32px);
-}
-
-.race-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: clamp(20px, 4vw, 24px);
-}
-
-.race-card {
- background: var(--surface-variant);
- padding: clamp(20px, 4vw, 24px);
- border-radius: var(--radius-lg);
- border-left: 4px solid var(--primary);
- transition: var(--transition);
-}
-
-.race-card:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-sm);
-}
-
-.race-phase {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- margin-bottom: 0.75rem;
-}
-
-.race-icon {
- font-size: 20px;
-}
-
-.race-phase h4 {
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin: 0;
- font-size: var(--text-lg);
-}
-
-.race-focus {
- color: var(--primary);
- font-weight: var(--font-semibold);
- font-size: var(--text-sm);
- margin-bottom: 0.5rem;
-}
-
-.race-actions {
- color: var(--text-secondary);
- line-height: var(--leading-normal);
- font-size: var(--text-sm);
-}
-
-/* ================================================================
- CTA SECTION
- ================================================================ */
-
-.branding-cta {
- padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px);
- background: var(--contact-gradient);
-}
-
-.cta-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.cta-title {
- text-align: center;
- font-size: clamp(28px, 6vw, 48px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: clamp(40px, 8vw, 64px);
-}
-
-.cta-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: clamp(40px, 8vw, 64px);
- align-items: center;
-}
-
-.cta-content-title {
- font-size: clamp(20px, 5vw, 28px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 1rem;
-}
-
-.cta-description {
- color: var(--text-secondary);
- line-height: var(--leading-relaxed);
- margin-bottom: 2rem;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.cta-features {
- margin-bottom: 2rem;
-}
-
-.cta-feature {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- margin-bottom: 0.75rem;
- color: var(--text-primary);
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.feature-icon {
- color: var(--success);
- font-weight: var(--font-bold);
- font-size: var(--text-lg);
-}
-
-.cta-buttons {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
-}
-
-.cta-btn {
- padding: 0.75rem 1.5rem;
- border-radius: var(--radius-lg);
- text-decoration: none;
- font-weight: var(--font-semibold);
- transition: var(--transition);
- display: inline-block;
-}
-
-.cta-btn.primary {
- background: var(--gradient-primary);
- color: white;
- box-shadow: var(--shadow-md);
-}
-
-.cta-btn.primary:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-lg);
-}
-
-.cta-btn.secondary {
- background: var(--surface);
- color: var(--primary);
- border: 2px solid var(--border-light);
- box-shadow: var(--shadow-sm);
-}
-
-.cta-btn.secondary:hover {
- border-color: var(--primary);
- background: rgba(59, 130, 246, 0.05);
-}
-
-.cta-info {
- background: var(--surface);
- padding: clamp(32px, 6vw, 40px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-sm);
-}
-
-.cta-info-title {
- font-size: clamp(20px, 5vw, 24px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 1.5rem;
-}
-
-/* ================================================================
- CONTACT SECTION
- ================================================================ */
-
-.contact {
- padding: clamp(40px, 8vw, 80px) clamp(16px, 4vw, 24px);
- background: var(--surface);
-}
-
-.contact-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.contact-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: clamp(40px, 8vw, 64px);
- align-items: start;
-}
-
-.contact-form-wrapper {
- background: var(--surface-variant);
- padding: clamp(32px, 6vw, 40px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-sm);
-}
-
-.form-title {
- font-size: clamp(22px, 5vw, 28px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 0.5rem;
-}
-
-.form-subtitle {
- color: var(--text-secondary);
- margin-bottom: 2rem;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.contact-form {
- display: flex;
- flex-direction: column;
- gap: 1.5rem;
-}
-
-.form-group {
- display: flex;
- flex-direction: column;
-}
-
-.form-label {
- font-weight: var(--font-medium);
- color: var(--text-primary);
- margin-bottom: 0.5rem;
- font-size: var(--text-sm);
-}
-
-.form-input, .form-textarea {
- padding: 0.75rem;
- border: 2px solid var(--border-light);
- border-radius: var(--radius-sm);
- font-family: var(--font-family);
- font-size: var(--text-base);
- transition: var(--transition);
- background: var(--surface);
-}
-
-.form-input:focus, .form-textarea:focus {
- outline: none;
- border-color: var(--primary);
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.form-textarea {
- resize: vertical;
- min-height: 120px;
-}
-
-.char-counter {
- text-align: right;
- font-size: var(--text-xs);
- color: var(--text-muted);
- margin-top: 0.25rem;
-}
-
-.char-counter.warning {
- color: var(--warning);
-}
-
-.char-counter.error {
- color: var(--error);
-}
-
-.field-error {
- color: var(--error);
- font-size: var(--text-xs);
- margin-top: 0.25rem;
- min-height: 16px;
-}
-
-.form-input.error, .form-textarea.error {
- border-color: var(--error);
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-}
-
-.form-submit {
- background: var(--gradient-primary);
- color: white;
- padding: 1rem 2rem;
- border: none;
- border-radius: var(--radius-lg);
- font-weight: var(--font-semibold);
- font-size: var(--text-base);
- cursor: pointer;
- transition: var(--transition);
- box-shadow: var(--shadow-md);
-}
-
-.form-submit:hover:not(:disabled) {
- transform: translateY(-2px);
- box-shadow: var(--shadow-lg);
-}
-
-.form-submit:disabled {
- opacity: 0.6;
- cursor: not-allowed;
-}
-
-.btn-loading {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
-}
-
-.spinner {
- display: inline-block;
- width: 12px;
- height: 12px;
- border: 2px solid rgba(255, 255, 255, 0.3);
- border-radius: 50%;
- border-top: 2px solid white;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-.form-messages {
- margin-bottom: 1rem;
- padding: 0.75rem;
- border-radius: var(--radius-sm);
- font-size: var(--text-sm);
- font-weight: var(--font-medium);
-}
-
-.form-messages.success {
- background: rgba(16, 185, 129, 0.1);
- color: var(--success-dark);
- border: 1px solid rgba(16, 185, 129, 0.3);
-}
-
-.form-messages.error {
- background: rgba(239, 68, 68, 0.1);
- color: var(--error);
- border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-.contact-info {
- background: var(--contact-gradient);
- padding: clamp(32px, 6vw, 40px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-sm);
-}
-
-.contact-info-title {
- font-size: clamp(20px, 5vw, 24px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 2rem;
-}
-
-.contact-item {
- display: flex;
- align-items: flex-start;
- gap: 1rem;
- margin-bottom: 2rem;
- padding-bottom: 1.5rem;
- border-bottom: 1px solid var(--border-light);
-}
-
-.contact-item:last-of-type {
- border-bottom: none;
- margin-bottom: 1rem;
-}
-
-.contact-icon {
- font-size: 24px;
- flex-shrink: 0;
- margin-top: 0.25rem;
-}
-
-.contact-details h4 {
- font-weight: var(--font-semibold);
- color: var(--text-primary);
- margin: 0 0 0.5rem 0;
- font-size: var(--text-base);
-}
-
-.contact-details p {
- color: var(--text-secondary);
- margin: 0;
- line-height: var(--leading-normal);
- font-size: var(--text-sm);
-}
-
-.contact-email {
- color: var(--primary);
- text-decoration: none;
- font-weight: var(--font-medium);
-}
-
-.contact-email:hover {
- text-decoration: underline;
-}
-
-.quick-links {
- margin-top: 2rem;
- padding-top: 1.5rem;
- border-top: 1px solid var(--border-light);
-}
-
-.quick-links h4 {
- font-weight: var(--font-semibold);
- color: var(--text-primary);
- margin-bottom: 1rem;
- font-size: var(--text-base);
-}
-
-.quick-links-grid {
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
-}
-
-.quick-link {
- text-decoration: none;
- color: var(--primary);
- font-size: var(--text-sm);
- font-weight: var(--font-medium);
- padding: 0.5rem 0;
- border-radius: var(--radius-sm);
- transition: var(--transition);
-}
-
-.quick-link:hover {
- background: rgba(59, 130, 246, 0.05);
- padding-left: 0.5rem;
-}
-
-.quick-access {
- background: var(--surface-variant);
- padding: clamp(32px, 6vw, 40px);
- border-radius: var(--radius-xl);
- box-shadow: var(--shadow-sm);
-}
-
-.quick-access-title {
- font-size: clamp(20px, 5vw, 24px);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: 1.5rem;
-}
-
-.quick-access-grid {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-}
-
-.quick-access-card {
- background: var(--surface);
- padding: 1.5rem;
- border-radius: var(--radius-lg);
- text-decoration: none;
- transition: var(--transition);
- border: 1px solid var(--border-light);
-}
-
-.quick-access-card:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-md);
-}
-
-.quick-access-icon {
- font-size: 32px;
- margin-bottom: 0.75rem;
-}
-
-.quick-access-card h4 {
- color: var(--text-primary);
- margin: 0 0 0.5rem 0;
- font-weight: var(--font-semibold);
- font-size: var(--text-lg);
-}
-
-.quick-access-card p {
- color: var(--text-secondary);
- margin: 0;
- font-size: var(--text-sm);
-}
-
-.commitment-statement {
- background: var(--surface);
- padding: clamp(20px, 4vw, 24px);
- border-radius: var(--radius-lg);
- margin-top: 1.5rem;
- border-left: 4px solid var(--primary);
-}
-
-.commitment-text {
- color: var(--text-secondary);
- margin: 0;
- font-style: italic;
- line-height: var(--leading-relaxed);
- font-size: var(--text-sm);
-}
-
-/* ================================================================
- FOOTER
- ================================================================ */
-
-.footer {
- padding: clamp(30px, 5vw, 40px) clamp(16px, 4vw, 24px) clamp(20px, 3vw, 30px);
- background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
- margin: 0;
- width: 100%;
- position: relative;
- overflow-x: hidden;
- box-sizing: border-box;
- color: white;
-}
-
-.footer-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.footer-main {
- display: grid;
- grid-template-columns: 1fr 2fr;
- gap: clamp(32px, 6vw, 48px);
- margin-bottom: clamp(24px, 5vw, 32px);
-}
-
-.footer-company {
- max-width: 400px;
-}
-
-.footer-logo {
- margin-bottom: 1rem;
-}
-
-.footer-logo-img {
- height: 50px;
- width: auto;
- object-fit: contain;
- filter: brightness(0) invert(1);
-}
-
-.footer-description {
- color: rgba(255, 255, 255, 0.8);
- line-height: var(--leading-relaxed);
- margin-bottom: 1.5rem;
- font-size: var(--text-sm);
-}
-
-.footer-contact {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.footer-contact-item {
- color: rgba(255, 255, 255, 0.7);
- text-decoration: none;
- font-size: var(--text-sm);
- transition: var(--transition);
-}
-
-.footer-contact-item:hover {
- color: white;
-}
-
-.footer-nav {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: clamp(24px, 5vw, 32px);
-}
-
-.footer-nav-title {
- font-weight: var(--font-bold);
- color: white;
- margin-bottom: 1rem;
- font-size: var(--text-lg);
-}
-
-.footer-nav-links {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.footer-nav-link {
- color: rgba(255, 255, 255, 0.7);
- text-decoration: none;
- font-size: var(--text-sm);
- transition: var(--transition);
-}
-
-.footer-nav-link:hover {
- color: white;
- padding-left: 4px;
-}
-
-.footer-bottom {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-top: clamp(16px, 3vw, 24px);
- border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.footer-legal {
- display: flex;
- gap: 1.5rem;
-}
-
-.footer-legal-link {
- color: rgba(255, 255, 255, 0.6);
- text-decoration: none;
- font-size: var(--text-xs);
- transition: var(--transition);
-}
-
-.footer-legal-link:hover {
- color: white;
-}
-
-/* ================================================================
- RESPONSIVE DESIGN
- ================================================================ */
-
-@media (max-width: 1024px) {
- .company-grid, .founder-grid, .cta-grid, .contact-grid {
- grid-template-columns: 1fr;
- text-align: center;
- }
-
- .footer-main {
- grid-template-columns: 1fr;
- text-align: center;
- }
-
- .footer-bottom {
- flex-direction: column;
- gap: 1rem;
- text-align: center;
- }
-}
-
-/* ================================================================
- DIGITAL BRANDING PAGE STYLES - Exact copy from Django version
- ================================================================ */
-
-/* Hero Section - matches homepage hero */
-.digital-branding-hero {
- position: relative;
- background: var(--gradient-hero);
- overflow: hidden;
- min-height: 85vh;
- display: flex;
- align-items: center;
- padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px);
-}
-
-.hero-container {
- max-width: 1280px;
- margin: 0 auto;
- text-align: center;
- position: relative;
- z-index: 10;
- width: 100%;
-}
-
-.trust-badge {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: rgba(59, 130, 246, 0.08);
- padding: 0.5rem 1.25rem;
- border-radius: 50px;
- margin-bottom: 2.5rem;
- font-size: 0.875rem;
- font-weight: 600;
- color: var(--primary);
- border: 1px solid rgba(59, 130, 246, 0.15);
- backdrop-filter: blur(10px);
-}
-
-.trust-badge-emoji {
- font-size: 0.75rem;
-}
-
-.hero-title {
- font-weight: 800;
- margin-bottom: 2.5rem;
- line-height: 1.1;
- letter-spacing: -0.02em;
- font-size: clamp(36px, 8vw, 110px);
- margin-bottom: clamp(24px, 6vw, 40px);
-}
-
-.hero-title-gradient {
- background: var(--gradient-primary);
- background-size: 300% 300%;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.hero-title-normal {
- color: var(--text-primary);
-}
-
-.hero-description {
- color: var(--text-secondary);
- margin-bottom: 3.5rem;
- max-width: 720px;
- margin-left: auto;
- margin-right: auto;
- line-height: 1.7;
- font-weight: 400;
- font-size: clamp(1.1rem, 3vw, 1.4rem);
- margin-bottom: clamp(32px, 8vw, 56px);
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.hero-buttons {
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- margin-bottom: 5rem;
- gap: clamp(12px, 3vw, 20px);
- margin-bottom: clamp(40px, 10vw, 80px);
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.trust-indicators {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
- gap: clamp(16px, 4vw, 48px);
- max-width: 600px;
- margin: 0 auto;
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.trust-card {
- text-align: center;
- background: rgba(255, 255, 255, 0.5);
- border: 1px solid rgba(255, 255, 255, 0.8);
- backdrop-filter: blur(10px);
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
- border-radius: 1rem;
- padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
-}
-
-.trust-number {
- background: var(--text-gradient);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- font-weight: 800;
- margin-bottom: 0.5rem;
- font-size: clamp(1rem, 3vw, 1.2rem);
-}
-
-.trust-text {
- color: var(--text-secondary);
- font-weight: 500;
- letter-spacing: 0.01em;
- font-size: clamp(12px, 3vw, 15px);
-}
-
-/* Why Choose Us Section - matches company profile */
-.why-choose-us {
- position: relative;
- background: var(--company-gradient);
- overflow: hidden;
- padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
-}
-
-.section-container {
- max-width: 1200px;
- margin: 0 auto;
- position: relative;
- z-index: 10;
-}
-
-.section-header {
- text-align: center;
- margin-bottom: clamp(40px, 10vw, 80px);
-}
-
-.section-badge {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: rgba(30, 64, 175, 0.1);
- padding: 0.5rem 1.25rem;
- border-radius: 50px;
- margin-bottom: 1.5rem;
- border: 1px solid rgba(30, 64, 175, 0.2);
-}
-
-.section-badge-icon {
- font-size: 1rem;
-}
-
-.section-badge-text {
- font-size: 0.875rem;
- font-weight: 600;
- color: var(--primary);
-}
-
-.section-title {
- font-weight: 800;
- color: var(--primary);
- margin-bottom: 1rem;
- text-align: center;
- font-size: clamp(2rem, 5vw, 3.5rem);
-}
-
-.section-subtitle {
- font-size: 1.25rem;
- color: var(--text-secondary);
- max-width: 600px;
- margin: 0 auto;
- line-height: 1.6;
-}
-
-.why-choose-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
- gap: clamp(24px, 6vw, 40px);
-}
-
-.choice-card {
- background: white;
- border-radius: clamp(16px, 4vw, 24px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- text-align: center;
- padding: clamp(24px, 6vw, 40px);
- transition: all 0.2s ease;
-}
-
-.choice-icon {
- margin-bottom: 1.25rem;
- font-size: clamp(2.5rem, 6vw, 3.5rem);
- margin-bottom: clamp(16px, 4vw, 20px);
-}
-
-.choice-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 1rem;
- font-size: clamp(1.2rem, 4vw, 1.5rem);
- margin-bottom: clamp(12px, 3vw, 16px);
-}
-
-.choice-description {
- color: var(--text-secondary);
- line-height: 1.6;
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-/* Our Process Section - matches services */
-.our-process {
- background: var(--services-gradient);
- padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
-}
-
-.process-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
- gap: clamp(20px, 5vw, 32px);
- margin-bottom: clamp(40px, 10vw, 60px);
-}
-
-.process-step-card {
- background: white;
- border-radius: clamp(16px, 4vw, 20px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- padding: clamp(24px, 6vw, 32px);
- display: flex;
- align-items: flex-start;
- gap: clamp(16px, 4vw, 20px);
- transition: all 0.2s ease;
-}
-
-.step-number {
- background: var(--gradient-primary);
- color: white;
- width: clamp(40px, 10vw, 50px);
- height: clamp(40px, 10vw, 50px);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: bold;
- font-size: clamp(16px, 4vw, 20px);
- flex-shrink: 0;
-}
-
-.step-content {
- flex: 1;
-}
-
-.step-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 0.75rem;
- font-size: clamp(1.1rem, 3.5vw, 1.3rem);
-}
-
-.step-description {
- color: var(--text-secondary);
- line-height: 1.6;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-/* RACE Framework */
-.race-framework {
- background: white;
- border-radius: clamp(16px, 4vw, 24px);
- box-shadow: 0 12px 40px rgba(30, 64, 175, 0.08);
- padding: clamp(24px, 6vw, 40px);
-}
-
-.race-title {
- text-align: center;
- font-weight: bold;
- color: var(--primary);
- margin-bottom: clamp(20px, 5vw, 32px);
- font-size: clamp(1.3rem, 4vw, 1.8rem);
-}
-
-.race-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
- gap: clamp(16px, 4vw, 24px);
-}
-
-.race-card {
- text-align: center;
- background: var(--background-light);
- border-radius: clamp(12px, 3vw, 16px);
- padding: clamp(16px, 4vw, 24px);
- transition: all 0.2s ease;
-}
-
-.race-phase {
- margin-bottom: 0.75rem;
-}
-
-.race-icon {
- font-size: clamp(1.5rem, 4vw, 2rem);
- margin-bottom: 0.5rem;
- display: block;
-}
-
-.race-phase h4 {
- font-weight: bold;
- color: var(--primary);
- margin: 0;
- font-size: clamp(1.1rem, 3.5vw, 1.3rem);
-}
-
-.race-focus {
- font-weight: 600;
- color: var(--text-primary);
- margin-bottom: 0.5rem;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.race-actions {
- color: var(--text-secondary);
- font-size: clamp(12px, 3vw, 14px);
- line-height: 1.5;
-}
-
-/* Branding Services Section - matches services */
-.branding-services {
- background: var(--clients-gradient);
- padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
-}
-
-.services-title {
- font-weight: bold;
- text-align: center;
- margin-bottom: 1rem;
- color: var(--primary);
- font-size: clamp(1.8rem, 5vw, 2.5rem);
-}
-
-.services-subtitle {
- text-align: center;
- color: var(--text-secondary);
- margin-bottom: 3rem;
- font-size: clamp(16px, 4vw, 20px);
- margin-bottom: clamp(24px, 6vw, 48px);
-}
-
-.branding-services-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
- gap: clamp(20px, 5vw, 32px);
-}
-
-.service-card {
- background: white;
- border-radius: clamp(16px, 4vw, 20px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- text-align: center;
- padding: clamp(24px, 6vw, 32px);
- transition: all 0.2s ease;
-}
-
-.service-icon {
- margin-bottom: 1.25rem;
- font-size: clamp(2.5rem, 6vw, 3rem);
- margin-bottom: clamp(16px, 4vw, 20px);
-}
-
-.service-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 1rem;
- font-size: clamp(1.2rem, 4vw, 1.4rem);
- margin-bottom: clamp(12px, 3vw, 16px);
-}
-
-.service-description {
- color: var(--text-secondary);
- line-height: 1.6;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-/* CTA Section - matches contact */
-.branding-cta {
- background: var(--contact-gradient);
- padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
-}
-
-.cta-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.cta-title {
- font-weight: bold;
- text-align: center;
- color: var(--primary);
- font-size: clamp(1.8rem, 5vw, 2.5rem);
- margin-bottom: clamp(24px, 6vw, 48px);
-}
-
-.cta-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
- gap: clamp(30px, 8vw, 60px);
- align-items: start;
-}
-
-.cta-content {
- background: white;
- border-radius: clamp(16px, 4vw, 20px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- padding: clamp(24px, 6vw, 40px);
-}
-
-.cta-content-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 1rem;
- font-size: clamp(1.3rem, 4vw, 1.6rem);
-}
-
-.cta-description {
- color: var(--text-secondary);
- line-height: 1.6;
- margin-bottom: 1.5rem;
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-.cta-features {
- margin-bottom: 2rem;
-}
-
-.cta-feature {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- margin-bottom: 0.75rem;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.feature-icon {
- color: var(--success);
- font-weight: bold;
-}
-
-.cta-buttons {
- display: flex;
- flex-direction: column;
- gap: clamp(12px, 3vw, 16px);
-}
-
-.cta-btn {
- padding: clamp(14px, 4vw, 16px) clamp(20px, 5vw, 24px);
- border-radius: clamp(8px, 2vw, 12px);
- font-weight: 600;
- text-decoration: none;
- text-align: center;
- font-size: clamp(14px, 3.5vw, 16px);
- transition: all 0.2s ease;
- min-height: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.cta-btn.primary {
- background: var(--gradient-primary);
- color: white;
- box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
-}
-
-.cta-btn.primary:hover {
- transform: translateY(-2px);
- box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
-}
-
-.cta-btn.secondary {
- background: var(--surface);
- color: var(--primary);
- border: 2px solid var(--border-light);
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
-}
-
-.cta-btn.secondary:hover {
- transform: translateY(-2px);
- border-color: var(--primary);
- background: rgba(59, 130, 246, 0.05);
- box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
-}
-
-.cta-info {
- background: white;
- border-radius: clamp(16px, 4vw, 20px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- padding: clamp(24px, 6vw, 40px);
-}
-
-.cta-info-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 1.5rem;
- font-size: clamp(1.2rem, 4vw, 1.5rem);
- margin-bottom: clamp(16px, 4vw, 24px);
-}
-
-.contact-item {
- display: flex;
- align-items: flex-start;
- gap: clamp(12px, 3vw, 16px);
- margin-bottom: clamp(20px, 5vw, 32px);
-}
-
-.contact-icon {
- background: var(--gradient-primary);
- border-radius: clamp(8px, 2vw, 12px);
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- width: clamp(40px, 10vw, 50px);
- height: clamp(40px, 10vw, 50px);
- font-size: clamp(16px, 4vw, 20px);
-}
-
-.contact-details h4 {
- font-weight: 600;
- color: var(--primary);
- margin-bottom: 0.5rem;
- font-size: clamp(16px, 4vw, 19px);
-}
-
-.contact-details p {
- color: var(--text-secondary);
- line-height: 1.6;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.contact-email {
- color: var(--primary);
- text-decoration: none;
-}
-
-.contact-email:hover {
- text-decoration: underline;
-}
-
-.commitment-statement {
- background: var(--services-gradient);
- border-left: 4px solid var(--primary);
- border-radius: clamp(12px, 3vw, 16px);
- padding: clamp(16px, 4vw, 24px);
- margin-top: clamp(20px, 5vw, 32px);
-}
-
-.commitment-text {
- color: var(--primary);
- font-weight: 600;
- text-align: center;
- font-size: clamp(14px, 3.5vw, 18px);
- line-height: 1.6;
-}
-
-/* ================================================================
- HOMEPAGE STYLES - Exact copy from Django homepage.css
- ================================================================ */
-
-/* Override main-container for homepage full-width sections */
-.main-container {
- max-width: none;
- padding: 0;
-}
-
-/* Hero Section */
-.hero {
- position: relative;
- background: var(--gradient-hero);
- overflow: hidden;
- min-height: 85vh;
- display: flex;
- align-items: center;
- padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px);
-}
-
-.hero-container {
- max-width: 1280px;
- margin: 0 auto;
- text-align: center;
- position: relative;
- z-index: 10;
- width: 100%;
-}
-
-.trust-badge {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: rgba(59, 130, 246, 0.08);
- padding: 0.5rem 1.25rem;
- border-radius: 50px;
- margin-bottom: 2.5rem;
- font-size: 0.875rem;
- font-weight: 600;
- color: var(--primary);
- border: 1px solid rgba(59, 130, 246, 0.15);
- backdrop-filter: blur(10px);
-}
-
-.trust-badge-emoji {
- font-size: 0.75rem;
-}
-
-.hero-title {
- font-weight: 800;
- margin-bottom: 2.5rem;
- line-height: 1.1;
- letter-spacing: -0.02em;
- font-size: clamp(36px, 8vw, 110px);
- margin-bottom: clamp(24px, 6vw, 40px);
-}
-
-.hero-title-gradient {
- background: var(--gradient-primary);
- background-size: 300% 300%;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.hero-title-normal {
- color: var(--text-primary);
-}
-
-.hero-description {
- color: var(--text-secondary);
- margin-bottom: 3.5rem;
- max-width: 720px;
- margin-left: auto;
- margin-right: auto;
- line-height: 1.7;
- font-weight: 400;
- font-size: clamp(1.1rem, 3vw, 1.4rem);
- margin-bottom: clamp(32px, 8vw, 56px);
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.hero-buttons {
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- margin-bottom: 5rem;
- gap: clamp(12px, 3vw, 20px);
- margin-bottom: clamp(40px, 10vw, 80px);
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.trust-indicators {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
- gap: clamp(16px, 4vw, 48px);
- max-width: 600px;
- margin: 0 auto;
- padding: 0 clamp(8px, 2vw, 16px);
-}
-
-.trust-card {
- text-align: center;
- background: rgba(255, 255, 255, 0.5);
- border: 1px solid rgba(255, 255, 255, 0.8);
- backdrop-filter: blur(10px);
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
- border-radius: 1rem;
- padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
-}
-
-.trust-number {
- background: var(--text-gradient);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- font-weight: 800;
- margin-bottom: 0.5rem;
- font-size: clamp(1.8rem, 5vw, 2.5rem);
-}
-
-.trust-text {
- color: var(--text-secondary);
- font-weight: 500;
- letter-spacing: 0.01em;
- font-size: clamp(12px, 3vw, 15px);
-}
-
-/* Company Profile Section */
-.company-profile {
- position: relative;
- background: var(--company-gradient);
- overflow: hidden;
- padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
-}
-
-.company-container {
- max-width: 1200px;
- margin: 0 auto;
- position: relative;
- z-index: 10;
-}
-
-.section-header {
- text-align: center;
- margin-bottom: clamp(40px, 10vw, 80px);
-}
-
-.section-badge {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: rgba(30, 64, 175, 0.1);
- padding: 0.5rem 1.25rem;
- border-radius: 50px;
- margin-bottom: 1.5rem;
- border: 1px solid rgba(30, 64, 175, 0.2);
-}
-
-.section-badge-icon {
- font-size: 1rem;
-}
-
-.section-badge-text {
- font-size: 0.875rem;
- font-weight: 600;
- color: var(--primary);
-}
-
-.section-title {
- font-weight: 800;
- color: var(--primary);
- margin-bottom: 1rem;
- text-align: center;
- font-size: clamp(2rem, 5vw, 3.5rem);
-}
-
-.section-subtitle {
- font-size: 1.25rem;
- color: var(--text-secondary);
- max-width: 600px;
- margin: 0 auto;
- line-height: 1.6;
-}
-
-.company-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
- gap: clamp(40px, 10vw, 80px);
- align-items: center;
-}
-
-.company-content-card {
- background: white;
- border-radius: 1.5rem;
- box-shadow: 0 20px 60px rgba(30, 64, 175, 0.08);
- border: 1px solid rgba(255, 255, 255, 0.8);
- position: relative;
- padding: clamp(24px, 6vw, 48px);
-}
-
-.decorative-corner {
- position: absolute;
- top: 0;
- right: 0;
- width: 80px;
- height: 80px;
- background: var(--gradient-primary);
- border-top-right-radius: 1.5rem;
- border-bottom-left-radius: 1.5rem;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.5rem;
-}
-
-.company-content-title {
- font-weight: bold;
- color: var(--primary);
- font-size: clamp(1.3rem, 4vw, 1.8rem);
- margin-bottom: clamp(16px, 4vw, 24px);
- margin-top: clamp(12px, 3vw, 20px);
-}
-
-.company-content-text {
- color: var(--text-secondary);
- line-height: 1.8;
- margin-bottom: clamp(20px, 5vw, 32px);
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-.company-badges {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
- gap: clamp(12px, 3vw, 16px);
- margin-bottom: clamp(20px, 5vw, 32px);
-}
-
-.company-badge {
- color: white;
- border-radius: 0.75rem;
- text-align: center;
- font-size: clamp(12px, 3vw, 14px);
- font-weight: 600;
- padding: clamp(12px, 3vw, 16px);
-}
-
-.company-badge-primary {
- background: var(--gradient-primary);
- box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
-}
-
-.company-badge-purple {
- background: var(--badge-purple);
- box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
-}
-
-.company-badge-orange {
- background: var(--badge-orange);
- box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
-}
-
-.company-badge-icon {
- margin-bottom: 0.5rem;
- font-size: clamp(18px, 4vw, 24px);
-}
-
-.company-visual {
- position: relative;
-}
-
-.main-visual {
- width: 100%;
- max-width: 500px;
- background: var(--visual-gradient);
- border-radius: clamp(16px, 4vw, 32px);
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 32px 80px rgba(30, 64, 175, 0.2);
- position: relative;
- margin: 0 auto;
- overflow: hidden;
- height: clamp(250px, 50vw, 400px);
-}
-
-.main-visual-icon {
- color: white;
- position: relative;
- z-index: 10;
- text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
- font-size: clamp(3rem, 8vw, 5rem);
-}
-
-.floating-element {
- position: absolute;
- background: white;
- border-radius: clamp(8px, 2vw, 16px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.15);
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.floating-element-1 {
- top: 10%;
- right: clamp(-20%, -10%, -5%);
- width: clamp(50px, 12vw, 80px);
- height: clamp(50px, 12vw, 80px);
- font-size: clamp(1.2rem, 3vw, 2rem);
-}
-
-.floating-element-2 {
- bottom: 15%;
- left: clamp(-10%, -5%, 0%);
- width: clamp(40px, 10vw, 60px);
- height: clamp(40px, 10vw, 60px);
- border-radius: 50%;
- box-shadow: 0 8px 32px rgba(64, 224, 208, 0.15);
- font-size: clamp(1rem, 2.5vw, 1.5rem);
-}
-
-.achievement-strip {
- background: white;
- border-radius: clamp(12px, 3vw, 20px);
- box-shadow: 0 16px 48px rgba(30, 64, 175, 0.08);
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
- gap: clamp(16px, 4vw, 32px);
- align-items: center;
- margin-top: clamp(40px, 10vw, 80px);
- padding: clamp(20px, 5vw, 32px);
-}
-
-.achievement-item {
- text-align: center;
-}
-
-.achievement-icon {
- margin-bottom: 0.5rem;
- font-size: clamp(1.5rem, 4vw, 2rem);
-}
-
-.achievement-title {
- font-weight: 600;
- color: var(--primary);
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-.achievement-text {
- color: var(--text-secondary);
- font-size: clamp(12px, 3vw, 14px);
-}
-
-/* Services Section */
-.services {
- background: var(--services-gradient);
- padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
-}
-
-.services-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.services-title {
- font-weight: bold;
- text-align: center;
- margin-bottom: 1rem;
- color: var(--primary);
- font-size: clamp(1.8rem, 5vw, 2.5rem);
-}
-
-.services-subtitle {
- text-align: center;
- color: var(--text-secondary);
- margin-bottom: 3rem;
- font-size: clamp(16px, 4vw, 20px);
- margin-bottom: clamp(24px, 6vw, 48px);
-}
-
-.services-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
- gap: clamp(16px, 4vw, 32px);
-}
-
-.service-card {
- background: white;
- border-radius: clamp(12px, 3vw, 20px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- text-align: center;
- padding: clamp(20px, 5vw, 40px);
-}
-
-.service-icon {
- margin-bottom: 1.25rem;
- font-size: clamp(2rem, 6vw, 3rem);
- margin-bottom: clamp(12px, 3vw, 20px);
-}
-
-.service-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 1rem;
- font-size: clamp(1.2rem, 4vw, 1.5rem);
- margin-bottom: clamp(12px, 3vw, 16px);
-}
-
-.service-description {
- color: var(--text-secondary);
- line-height: 1.6;
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-/* Clients Section */
-.clients {
- background: var(--clients-gradient);
- padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
-}
-
-.clients-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.clients-title {
- font-weight: bold;
- text-align: center;
- color: var(--primary);
- font-size: clamp(1.8rem, 5vw, 2.5rem);
- margin-bottom: clamp(24px, 6vw, 48px);
-}
-
-.clients-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
- gap: clamp(16px, 4vw, 32px);
-}
-
-.client-card {
- background: white;
- border-radius: clamp(12px, 3vw, 16px);
- box-shadow: 0 4px 16px rgba(30, 64, 175, 0.07);
- text-align: center;
- padding: clamp(20px, 5vw, 32px);
-}
-
-.client-icon {
- margin-bottom: 0.5rem;
- font-size: clamp(1.5rem, 4vw, 2rem);
-}
-
-.client-name {
- font-weight: 600;
- color: var(--primary);
- margin-bottom: 0.375rem;
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-.client-industry {
- color: var(--text-secondary);
- font-size: clamp(12px, 3vw, 16px);
-}
-
-/* Founder Section */
-.founder {
- background: white;
- padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
-}
-
-.founder-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.founder-title {
- font-weight: bold;
- text-align: center;
- color: var(--primary);
- font-size: clamp(1.8rem, 5vw, 2.5rem);
- margin-bottom: clamp(24px, 6vw, 48px);
-}
-
-.founder-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
- gap: clamp(30px, 8vw, 60px);
- align-items: center;
-}
-
-.founder-card-container {
- order: 2;
-}
-
-.founder-card {
- width: 100%;
- max-width: 400px;
- margin: 0 auto;
- background: var(--founder-gradient);
- border-radius: clamp(16px, 4vw, 24px);
- text-align: center;
- color: white;
- box-shadow: 0 20px 40px rgba(30, 64, 175, 0.15);
- padding: clamp(24px, 6vw, 40px);
-}
-
-.founder-avatar {
- width: clamp(60px, 15vw, 80px);
- height: clamp(60px, 15vw, 80px);
- margin-bottom: 1.25rem;
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
- border-radius: 12px;
- border: 2px solid rgba(255, 255, 255, 0.3);
- margin-left: auto;
- margin-right: auto;
-}
-
-.avatar-initials {
- font-size: clamp(18px, 5vw, 24px);
- font-weight: 700;
- color: white;
- letter-spacing: 1px;
-}
-
-.founder-name {
- font-weight: bold;
- margin-bottom: 0.5rem;
- font-size: clamp(1.3rem, 4vw, 1.8rem);
-}
-
-.founder-role {
- opacity: 0.9;
- margin-bottom: 1rem;
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-.founder-badges {
- display: flex;
- gap: clamp(8px, 2vw, 12px);
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.founder-badge {
- background: rgba(255, 255, 255, 0.2);
- border-radius: clamp(16px, 4vw, 20px);
- font-weight: 600;
- padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 16px);
- font-size: clamp(10px, 2.5vw, 12px);
-}
-
-.founder-content {
- order: 1;
-}
-
-.founder-text {
- color: var(--text-secondary);
- line-height: 1.8;
- margin-bottom: 1.5rem;
- font-size: clamp(16px, 4vw, 19px);
- margin-bottom: clamp(16px, 4vw, 24px);
-}
-
-.founder-text:last-of-type {
- margin-bottom: 2rem;
- margin-bottom: clamp(20px, 5vw, 32px);
-}
-
-.founder-quote {
- background: var(--services-gradient);
- border-left: 4px solid var(--primary);
- border-radius: clamp(12px, 3vw, 16px);
- padding: clamp(16px, 4vw, 24px);
-}
-
-.founder-quote-text {
- color: var(--primary);
- font-weight: 600;
- font-style: italic;
- font-size: clamp(14px, 3.5vw, 18px);
-}
-
-/* Contact Section */
-.contact {
- background: var(--contact-gradient);
- padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px);
-}
-
-.contact-container {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.contact-title {
- font-weight: bold;
- text-align: center;
- color: var(--primary);
- font-size: clamp(1.8rem, 5vw, 2.5rem);
- margin-bottom: clamp(24px, 6vw, 48px);
-}
-
-.contact-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
- gap: clamp(30px, 8vw, 60px);
- align-items: start;
-}
-
-.contact-form {
- background: white;
- border-radius: clamp(16px, 4vw, 20px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- padding: clamp(24px, 6vw, 40px);
-}
-
-.form-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 1.5rem;
- font-size: clamp(1.2rem, 4vw, 1.5rem);
- margin-bottom: clamp(16px, 4vw, 24px);
-}
-
-.form-group {
- margin-bottom: 1.5rem;
-}
-
-.form-label {
- display: block;
- margin-bottom: 0.5rem;
- color: var(--primary);
- font-weight: 600;
-}
-
-.form-input,
-.form-textarea {
- width: 100%;
- border: 2px solid var(--border-light);
- border-radius: clamp(8px, 2vw, 12px);
- padding: clamp(12px, 3vw, 14px);
- font-size: clamp(14px, 3.5vw, 16px);
- transition: border-color 0.2s;
- box-sizing: border-box;
-}
-
-.form-input:focus,
-.form-textarea:focus {
- outline: none;
- border-color: var(--primary);
-}
-
-.form-textarea {
- resize: vertical;
- min-height: 120px;
-}
-
-.form-submit {
- width: 100%;
- background: var(--gradient-primary);
- color: white;
- font-weight: 600;
- border: none;
- cursor: pointer;
- box-shadow: 0 4px 16px rgba(30, 64, 175, 0.20);
- border-radius: clamp(8px, 2vw, 12px);
- min-height: 48px;
- padding: clamp(14px, 4vw, 16px);
- font-size: clamp(14px, 3.5vw, 18px);
- transition: all 0.2s ease;
-}
-
-.form-submit:hover {
- transform: translateY(-1px);
- box-shadow: 0 6px 16px rgba(30, 64, 175, 0.30);
- background: var(--gradient-success);
-}
-
-.form-submit:active {
- transform: translateY(0px);
- box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
-}
-
-.contact-info {
- background: white;
- border-radius: clamp(16px, 4vw, 20px);
- box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
- padding: clamp(24px, 6vw, 40px);
-}
-
-.contact-info-title {
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 1.5rem;
- font-size: clamp(1.2rem, 4vw, 1.5rem);
- margin-bottom: clamp(16px, 4vw, 24px);
-}
-
-.contact-item {
- display: flex;
- align-items: flex-start;
- gap: clamp(12px, 3vw, 16px);
- margin-bottom: clamp(20px, 5vw, 32px);
-}
-
-.contact-icon {
- background: var(--gradient-primary);
- border-radius: clamp(8px, 2vw, 12px);
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- width: clamp(40px, 10vw, 50px);
- height: clamp(40px, 10vw, 50px);
- font-size: clamp(16px, 4vw, 20px);
-}
-
-.contact-details h4 {
- font-weight: 600;
- color: var(--primary);
- margin-bottom: 0.5rem;
- font-size: clamp(16px, 4vw, 19px);
-}
-
-.contact-details p {
- color: var(--text-secondary);
- line-height: 1.6;
- font-size: clamp(14px, 3.5vw, 16px);
-}
-
-.contact-email {
- color: var(--primary);
- text-decoration: none;
-}
-
-.commitment-statement {
- background: var(--services-gradient);
- border-left: 4px solid var(--primary);
- border-radius: clamp(12px, 3vw, 16px);
- padding: clamp(16px, 4vw, 24px);
- margin-top: clamp(20px, 5vw, 32px);
-}
-
-/* Form validation styles for homepage */
-.form-messages {
- margin-bottom: 20px;
- padding: 12px;
- border-radius: 8px;
- font-size: 14px;
- font-weight: 500;
-}
-
-.form-messages.success {
- background: rgba(16, 185, 129, 0.1);
- color: #059669;
- border: 1px solid rgba(16, 185, 129, 0.3);
-}
-
-.form-messages.error {
- background: rgba(239, 68, 68, 0.1);
- color: #dc2626;
- border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-.field-error {
- color: #dc2626;
- font-size: 12px;
- margin-top: 4px;
- min-height: 16px;
-}
-
-.char-counter {
- text-align: right;
- font-size: 12px;
- color: #6b7280;
- margin-top: 4px;
-}
-
-.char-counter.warning {
- color: #d97706;
-}
-
-.char-counter.error {
- color: #dc2626;
-}
-
-.form-input.error, .form-textarea.error {
- border-color: #dc2626;
- box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1);
-}
-
-.spinner {
- display: inline-block;
- width: 12px;
- height: 12px;
- border: 2px solid rgba(255, 255, 255, 0.3);
- border-radius: 50%;
- border-top: 2px solid white;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-.btn-loading {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-/* Mobile responsive adjustments for homepage */
-@media (max-width: 767px) {
- .founder-card-container {
- order: 1;
- }
-
- .founder-content {
- order: 2;
- }
-}
-
-@media (max-width: 768px) {
- .services-grid, .branding-services-grid, .why-choose-grid, .excellence-grid, .framework-grid, .portfolio-grid {
- grid-template-columns: 1fr;
- }
-
- .clients-grid {
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- }
-
- .achievement-strip, .stats-grid {
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
- }
-
- .race-grid {
- grid-template-columns: 1fr;
- }
-
- .process-grid {
- grid-template-columns: 1fr;
- }
-
- .process-step-card {
- flex-direction: column;
- text-align: center;
- }
-
- .founder-grid {
- grid-template-columns: 1fr;
- }
-
- .cta-buttons {
- justify-content: center;
- }
-}
-
-@media (max-width: 480px) {
- .trust-indicators {
- grid-template-columns: 1fr;
- }
-
- .hero-buttons {
- flex-direction: column;
- align-items: center;
- }
-
- .btn-primary, .btn-secondary {
- width: 100%;
- max-width: 280px;
- }
-
- .company-badges {
- justify-content: center;
- }
-}
-
-/* ================================================================
- MINIMAL BLOG STYLES
- ================================================================ */
-
-/* Blog page background emphasis */
-body.blog-context {
- /* Solid background as requested */
- --background: #EAF1FF;
- background: #EAF1FF;
-}
-
-/* Centered blog surface card */
-.blog-surface {
- max-width: 1100px;
- margin: 12px auto 20px;
- background: var(--surface);
- border: 1px solid var(--outline);
- border-radius: 20px;
- box-shadow: 0 12px 30px rgba(0,0,0,0.08);
- overflow: hidden;
-}
-.blog-surface .container { padding-left: 28px; padding-right: 28px; }
-.post-surface .container { padding-left: 28px; padding-right: 28px; }
-@media (max-width: 480px) {
- .blog-surface .container,
- .post-surface .container { padding-left: 16px; padding-right: 16px; }
-}
-
-/* Clean Blog Header (smaller) */
-.blog-surface .blog-header {
- background: linear-gradient(180deg, var(--surface) 0%, var(--surface-variant) 100%);
-}
-
-.blog-header {
- padding: calc(var(--header-height) + 0px) 0 10px;
- background: transparent; /* inside card */
- border-bottom: 1px solid var(--outline);
-}
-
-.blog-intro {
- text-align: center;
- margin-bottom: 8px;
-}
-
-.blog-title {
- font-size: 42px;
- font-weight: 800;
- color: var(--text-primary);
- margin-bottom: 8px;
- letter-spacing: -0.02em;
-}
-
-.blog-subtitle {
- font-size: 16px;
- color: var(--text-secondary);
- font-weight: 400;
- line-height: 1.5;
- max-width: 500px;
- margin: 0 auto;
-}
-
-/* Minimal Search */
-.search-container {
- max-width: 400px;
- margin: 0 auto;
-}
-
-.search-field {
- width: 100%;
- padding: 14px 16px;
- font-size: 16px;
- border: 1px solid var(--outline);
- border-radius: 8px;
- background: var(--surface);
- color: var(--text-primary);
- transition: border-color 0.2s ease;
-}
-
-.search-field:focus {
- outline: none;
- border-color: var(--primary);
-}
-
-.search-field::placeholder {
- color: var(--text-muted);
-}
-
-/* Simple Category Navigation */
-.category-nav {
- border-bottom: 1px solid var(--outline);
- background: transparent; /* inside card */
- padding: 8px 0;
-}
-
-.category-list {
- display: flex;
- justify-content: center;
- gap: 36px;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.category-link {
- background: none;
- border: none;
- color: var(--text-secondary);
- font-size: 15px;
- font-weight: 500;
- cursor: pointer;
- padding: 6px 0;
- position: relative;
- transition: color 0.2s ease;
-}
-
-.category-link:hover,
-.category-link.active {
- color: var(--text-primary);
-}
-
-.category-link.active::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 2px;
- background: var(--primary);
-}
-
-/* Minimal Article List */
-.article-list {
- padding: 28px 0 56px;
- background: transparent; /* inside card */
-}
-
-/* Sticky category bar */
-.category-nav {
- position: sticky;
- top: var(--header-height);
- z-index: var(--z-sticky);
- backdrop-filter: saturate(140%) blur(6px);
- box-shadow: 0 1px 0 rgba(0,0,0,0.04);
-}
-
-.category-link:focus-visible {
- outline: 2px solid var(--primary);
- outline-offset: 2px;
- border-radius: 6px;
-}
-
-.articles {
- max-width: 960px;
- margin: 0 auto;
-}
-
-/* Article Item */
-.article-item {
- padding: 32px 0;
- border-bottom: 1px solid var(--outline);
- transition: all 0.2s ease;
-}
-
-.article-item:last-child {
- border-bottom: none;
-}
-
-.article-item:hover {
- background: rgba(59, 130, 246, 0.04);
- border-radius: 8px;
- transform: translateY(-1px);
- transition: var(--transition);
-}
-
-.article-meta {
- display: flex;
- align-items: center;
- gap: 16px;
- margin-bottom: 8px;
- font-size: 14px;
- color: var(--text-muted);
- font-weight: 500;
-}
-
-.article-category {
- color: var(--primary);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- font-size: 12px;
- font-weight: 600;
-}
-
-.article-title a {
- border-radius: 6px;
-}
-
-.article-title a:focus-visible {
- outline: 2px solid var(--primary);
- outline-offset: 2px;
-}
-
-.article-title {
- font-size: 22px;
- font-weight: 750;
- color: var(--text-primary);
- margin-bottom: 10px;
- line-height: 1.28;
- letter-spacing: -0.012em;
-}
-
-.article-title:hover {
- color: var(--primary);
-}
-
-.article-excerpt {
- font-size: 16px;
- color: var(--text-secondary);
- line-height: 1.6;
- margin-bottom: 12px;
-}
-
-.article-footer {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 8px;
-}
-
-.article-author {
- font-size: 14px;
- color: var(--text-muted);
- font-weight: 500;
-}
-
-.article-link {
- color: var(--primary);
- text-decoration: none;
- font-weight: 600;
- font-size: 14px;
- display: inline-flex;
- align-items: center;
- gap: 6px;
- padding: 4px 6px;
- border-radius: 6px;
- transition: var(--transition);
-}
-
-.article-link::after {
- content: '→';
- transition: transform 0.2s ease;
-}
-
-.article-link:hover {
- background: rgba(59,130,246,0.06);
-}
-
-.article-link:hover::after {
- transform: translateX(2px);
-}
-
-.article-link:focus-visible {
- outline: 2px solid var(--primary);
- outline-offset: 2px;
-}
-
-/* Featured Article */
-.article-item.featured {
- padding: 40px 0;
- border-bottom: 2px solid var(--outline);
-}
-
-.article-item.featured .article-title {
- font-size: 28px;
- margin-bottom: 12px;
-}
-
-.article-item.featured .article-excerpt {
- font-size: 17px;
- margin-bottom: 20px;
-}
-
-/* Simple States */
-.loading-state {
- text-align: center;
- padding: 24px 0 48px;
- color: var(--text-muted);
- font-size: 16px;
-}
-
-/* Skeleton loader */
-.skeleton {
- display: grid;
- gap: 20px;
- max-width: 800px;
- margin: 0 auto;
- padding: 12px 0;
-}
-.skeleton-item {
- display: grid;
- gap: 10px;
-}
-.skeleton-line {
- height: 12px;
- border-radius: 6px;
- background: linear-gradient(90deg, var(--surface-variant) 25%, rgba(0,0,0,0.05) 37%, var(--surface-variant) 63%);
- background-size: 400% 100%;
- animation: skeleton-shimmer 1.4s ease infinite;
-}
-.skeleton-line.sm { width: 35%; }
-.skeleton-line.md { width: 65%; }
-.skeleton-line.lg { width: 95%; height: 14px; }
-
-@keyframes skeleton-shimmer {
- 0% { background-position: 100% 0; }
- 100% { background-position: -100% 0; }
-}
-
-.empty-state {
- text-align: center;
- padding: 80px 0;
- color: var(--text-muted);
- font-size: 16px;
-}
-
-.reset-filters {
- color: var(--primary);
- background: none;
- border: none;
- text-decoration: underline;
- cursor: pointer;
- font-size: inherit;
-}
-
-/* Newsletter (match site aesthetic) */
-.newsletter {
- background: var(--blog-hero-gradient);
- padding: 64px 0;
- text-align: center;
- border-top: 1px solid var(--outline);
-}
-
-.newsletter h2 {
- font-size: clamp(22px, 3.5vw, 28px);
- font-weight: 800;
- color: var(--text-primary);
- margin-bottom: 8px;
- letter-spacing: -0.02em;
-}
-
-.newsletter p {
- font-size: 16px;
- color: var(--text-secondary);
- margin-bottom: 20px;
-}
-
-.newsletter-form {
- display: flex;
- gap: 12px;
- max-width: 560px;
- margin: 0 auto;
- background: #fff;
- border: 1px solid var(--outline);
- border-radius: var(--radius-full);
- padding: 6px;
-}
-
-.email-input {
- flex: 1;
- padding: 12px 14px;
- font-size: 16px;
- border: 1px solid transparent;
- background: transparent;
- color: var(--text-primary);
-}
-
-.email-input:focus {
- outline: none;
- border-color: var(--primary);
-}
-
-.subscribe-btn {
- padding: 12px 18px;
- background: var(--gradient-primary);
- color: #fff;
- border: none;
- font-size: 15px;
- font-weight: 700;
- cursor: pointer;
- border-radius: var(--radius-full);
- transition: var(--transition);
-}
-
-.subscribe-btn:hover {
- transform: translateY(-1px);
-}
-
-/* Brutalist Blog Responsive */
-@media (max-width: 768px) {
- .blog-title {
- font-size: 2.5rem;
- }
-
- .article-title {
- font-size: 24px;
- }
-}
-
-@media (max-width: 480px) {
- .blog-title {
- font-size: 2rem;
- }
-
- .article-title {
- font-size: 20px;
- }
-
- .newsletter-form {
- flex-direction: column;
- gap: 8px;
- border-radius: var(--radius-lg);
- padding: 8px;
- }
-
- .subscribe-btn {
- width: 100%;
- border-radius: var(--radius-md);
- }
-}
-
-/* ================================================================
- BLOG POST STYLES
- ================================================================ */
-
-/* Reading progress */
-.reading-progress {
- position: fixed;
- top: 0;
- left: 0;
- height: 3px;
- width: 0;
- background: var(--primary);
- z-index: var(--z-fixed);
- transition: width 0.1s linear;
-}
-
-/* Post surface card (individual article) */
-.post-surface {
- max-width: 1100px;
- margin: 12px auto 20px;
- background: var(--surface);
- border: 1px solid var(--outline);
- border-radius: 20px;
- box-shadow: 0 12px 30px rgba(0,0,0,0.08);
- overflow: hidden;
-}
-.post-surface .blog-post { background: transparent; }
-.post-surface .related-articles { background: transparent; }
-.post-surface .newsletter-section { background: transparent; border-top: 1px solid var(--outline); }
-.post-surface .article-header {
- background: linear-gradient(180deg, var(--surface) 0%, var(--surface-variant) 100%);
- border-bottom: 1px solid var(--outline);
- padding-top: var(--space-xl);
- padding-bottom: var(--space-lg);
-}
-
-/* Refined post header and typography */
-.blog-post .article-header {
- max-width: 800px;
- margin: 0 auto var(--space-xxl);
-}
-
-.blog-post .article-title {
- font-weight: 850;
- font-size: clamp(28px, 4.5vw, 40px);
- line-height: 1.2;
- letter-spacing: -0.02em;
- margin: var(--space-md) 0 var(--space-sm);
- font-weight: var(--font-extrabold, 800);
-}
-
-.blog-post .article-excerpt {
- color: var(--text-secondary);
- font-size: clamp(16px, 2.2vw, 18px);
- line-height: var(--leading-relaxed);
- max-width: 65ch;
- margin: 0 auto var(--space-lg);
-}
-
-.blog-post .breadcrumb {
- justify-content: center;
- margin-bottom: var(--space-lg);
- font-size: var(--text-sm);
-}
-
-/* Content polish */
-.blog-post .article-content a {
- color: var(--primary);
- text-decoration: underline;
- text-underline-offset: 3px;
- text-decoration-thickness: 1.5px;
- text-decoration-color: var(--primary);
-}
-.blog-post .article-content a:hover {
- color: var(--primary-dark);
- text-decoration-thickness: 2px;
-}
-
-.blog-post .article-content img,
-.blog-post .article-content video {
- max-width: 100%;
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-md);
-}
-
-.blog-post .article-content figure {
- margin: var(--space-xl) 0;
- text-align: center;
-}
-.blog-post .article-content figcaption {
- color: var(--text-muted);
- font-size: var(--text-sm);
- margin-top: var(--space-sm);
-}
-
-/* Subtle code/blockquote refinements */
-.blog-post .article-content pre {
- background: var(--surface-variant);
- border: 1px solid var(--outline);
-}
-.blog-post .article-content blockquote {
- background: rgba(59, 130, 246, 0.06);
-}
-
-/* ================================================================
- BLOG POST STYLES
- ================================================================ */
-
-/* Article Hero Section */
-.article-hero {
- background: var(--gradient-hero);
- padding: calc(var(--header-height) + var(--space-xxl)) 0 var(--space-xl);
- position: relative;
- overflow: hidden;
-}
-
-.article-hero::before {
- content: '';
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
- animation: float 25s ease-in-out infinite;
-}
-
-/* Enhanced Breadcrumb */
-.breadcrumb {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- font-size: var(--text-sm);
- color: var(--text-muted);
- margin-bottom: var(--space-xl);
- font-weight: var(--font-medium);
-}
-
-.breadcrumb a {
- color: var(--primary);
- text-decoration: none;
- transition: var(--transition);
- padding: var(--space-xs) var(--space-sm);
- border-radius: var(--radius-sm);
-}
-
-.breadcrumb a:hover {
- background: rgba(59, 130, 246, 0.1);
- color: var(--primary-dark);
-}
-
-.breadcrumb span {
- color: var(--text-muted);
-}
-
-/* Enhanced Article Header */
-.article-header {
- text-align: center;
- max-width: 900px;
- margin: 0 auto;
-}
-
-.article-meta {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: var(--space-xl);
- margin-bottom: var(--space-xl);
- font-size: var(--text-sm);
- color: var(--text-muted);
- flex-wrap: wrap;
-}
-
-.article-category {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- background: var(--gradient-primary);
- color: white;
- padding: var(--space-sm) var(--space-lg);
- border-radius: var(--radius-full);
- font-weight: var(--font-bold);
- text-transform: uppercase;
- letter-spacing: 1px;
- font-size: var(--text-sm);
- box-shadow: var(--shadow-md);
-}
-
-.category-icon {
- font-size: var(--text-lg);
-}
-
-.article-author-section {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: var(--space-lg);
- margin-top: var(--space-xl);
-}
-
-.author-avatar {
- width: 60px;
- height: 60px;
- background: var(--gradient-primary);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: var(--text-2xl);
- box-shadow: var(--shadow-lg);
-}
-
-.author-info {
- text-align: left;
-}
-
-.author-name {
- display: block;
- font-size: var(--text-lg);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: var(--space-xs);
-}
-
-.author-title {
- display: block;
- font-size: var(--text-sm);
- color: var(--text-secondary);
- font-weight: var(--font-medium);
-}
-
-/* Blog Post Layout */
-.blog-post {
- background: var(--surface);
-}
-
-.blog-post .container {
- max-width: 760px;
- padding: var(--space-xxxl) var(--space-lg);
- margin: 0 auto;
-}
-
-/* Enhanced Article Image */
-.article-image-section {
- margin-bottom: var(--space-xxxl);
- margin-left: -28px;
- margin-right: -28px;
-}
-
-.article-image {
- border-radius: var(--radius-xl);
- overflow: hidden;
- box-shadow: var(--shadow-xl);
- position: relative;
- width: 100%;
-}
-
-.article-image img,
-.article-image .featured-image {
- width: 100%;
- height: auto;
- display: block;
-}
-
-.article-image-placeholder {
- width: 100%;
- height: 450px;
- background: var(--visual-gradient);
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- position: relative;
- overflow: hidden;
-}
-
-.article-image-placeholder::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
-}
-
-.image-content {
- text-align: center;
- z-index: 1;
- position: relative;
-}
-
-.image-icon {
- font-size: 4rem;
- margin-bottom: var(--space-lg);
- opacity: 0.9;
-}
-
-.image-content h3 {
- font-size: var(--text-3xl);
- font-weight: var(--font-bold);
- margin-bottom: var(--space-md);
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.image-content p {
- font-size: var(--text-lg);
- opacity: 0.9;
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-/* Article Content */
-.article-content {
- line-height: var(--leading-relaxed);
- color: var(--text-primary);
- margin-bottom: var(--space-xxxl);
-}
-
-.article-content h2 {
- letter-spacing: -0.01em;
- scroll-margin-top: 88px;
- font-size: var(--text-3xl);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin: var(--space-xxxl) 0 var(--space-lg);
- line-height: var(--leading-tight);
-}
-
-.article-content h3 {
- letter-spacing: -0.005em;
- scroll-margin-top: 88px;
- font-size: var(--text-2xl);
- font-weight: var(--font-semibold);
- color: var(--text-primary);
- margin: var(--space-xl) 0 var(--space-md);
- line-height: var(--leading-tight);
-}
-
-.article-content h4 {
- font-size: var(--text-xl);
- font-weight: var(--font-semibold);
- color: var(--text-primary);
- margin: var(--space-lg) 0 var(--space-md);
-}
-
-.article-content p {
- margin-bottom: var(--space-xl);
- font-size: clamp(17px, 1.6vw, 19px);
-}
-
-.article-content ul,
-.article-content ol {
- margin-bottom: var(--space-xl);
- padding-left: var(--space-xl);
-}
-
-.article-content li {
- line-height: 1.8;
-}
-
-.article-content li::marker {
- color: var(--primary);
- font-weight: var(--font-semibold);
-}
-
-.article-content li {
- margin-bottom: var(--space-sm);
- font-size: var(--text-lg);
-}
-
-.article-content strong {
- font-weight: var(--font-semibold);
- color: var(--text-primary);
-}
-
-.article-content blockquote {
- border-left: 4px solid var(--primary);
- background: var(--surface-variant);
- padding: var(--space-lg);
- margin: var(--space-xl) 0;
- border-radius: var(--radius-md);
- font-style: italic;
-}
-
-.article-content code {
- background: var(--surface-variant);
- padding: var(--space-xs) var(--space-sm);
- border-radius: var(--radius-xs);
- font-family: var(--font-mono);
- font-size: var(--text-sm);
- color: var(--primary);
-}
-
-.article-content pre {
- background: var(--surface-variant);
- padding: var(--space-lg);
- border-radius: var(--radius-md);
- overflow-x: auto;
- margin: var(--space-lg) 0;
-}
-
-.article-content pre code {
- background: none;
- padding: 0;
- color: var(--text-primary);
-}
-
-/* Article Footer */
-.article-footer {
- padding-top: var(--space-xl);
- border-top: 1px solid var(--outline);
- margin-bottom: var(--space-xxxl);
-}
-
-.article-tags {
- margin-bottom: var(--space-xl);
-}
-
-.tag {
- display: inline-block;
- background: var(--surface-variant);
- color: var(--text-secondary);
- padding: var(--space-xs) var(--space-sm);
- margin-right: var(--space-sm);
- margin-bottom: var(--space-sm);
- border-radius: var(--radius-sm);
- font-size: var(--text-sm);
- text-decoration: none;
- border: 1px solid var(--outline);
- transition: var(--transition);
-}
-
-.tag:hover {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
-}
-
-.article-share h4 {
- color: var(--text-primary);
- margin-bottom: var(--space-md);
- font-size: var(--text-lg);
- font-weight: var(--font-semibold);
-}
-
-.share-buttons {
- display: flex;
- gap: var(--space-md);
-}
-
-.share-btn {
- padding: var(--space-sm) var(--space-lg);
- background: var(--surface-variant);
- color: var(--text-secondary);
- text-decoration: none;
- border-radius: var(--radius-md);
- font-weight: var(--font-medium);
- transition: var(--transition);
- border: 1px solid var(--outline);
-}
-
-.share-btn:hover {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
-}
-
-.article-content pre {
- background: var(--surface-variant);
- padding: var(--space-lg);
- border-radius: var(--radius-md);
- overflow-x: auto;
- margin: var(--space-lg) 0;
-}
-
-.article-content pre code {
- background: none;
- padding: 0;
- color: var(--text-primary);
-}
-
-/* Article Footer */
-.article-footer {
- padding-top: var(--space-xl);
- border-top: 1px solid var(--outline);
- margin-bottom: var(--space-xxxl);
-}
-
-.article-tags {
- margin-bottom: var(--space-xl);
-}
-
-.tag {
- display: inline-block;
- background: var(--surface-variant);
- color: var(--text-secondary);
- padding: var(--space-xs) var(--space-sm);
- margin-right: var(--space-sm);
- margin-bottom: var(--space-sm);
- border-radius: var(--radius-sm);
- font-size: var(--text-sm);
- text-decoration: none;
- border: 1px solid var(--outline);
- transition: var(--transition);
-}
-
-.tag:hover {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
-}
-
-.article-share h4 {
- color: var(--text-primary);
- margin-bottom: var(--space-md);
- font-size: var(--text-lg);
- font-weight: var(--font-semibold);
-}
-
-.share-buttons {
- display: flex;
- gap: var(--space-md);
-}
-
-.share-btn {
- padding: var(--space-sm) var(--space-lg);
- background: var(--surface-variant);
- color: var(--text-secondary);
- text-decoration: none;
- border-radius: var(--radius-md);
- font-weight: var(--font-medium);
- transition: var(--transition);
- border: 1px solid var(--outline);
-}
-
-.share-btn:hover {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
-}
-
-/* Related Articles */
-.related-articles {
- background: var(--background-light);
- padding: var(--space-xxxl) 0;
-}
-
-/* Inside post card: cleaner separator and spacing */
-.post-surface .related-articles {
- background: transparent;
- border-top: 1px solid var(--outline);
- padding: var(--space-xxl) 0;
-}
-
-.related-articles h3 {
- text-align: center;
- font-size: var(--text-3xl);
- font-weight: var(--font-bold);
- color: var(--text-primary);
- margin-bottom: var(--space-xl);
-}
-
-.related-grid {
- display: grid;
- grid-template-columns: 1fr;
- gap: var(--space-xl);
- max-width: 1200px;
- margin: 0 auto;
-}
-
-@media (min-width: 768px) {
- .related-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-/* Related card UI */
-.related-card {
- background: var(--surface);
- border: 1px solid var(--outline);
- border-radius: var(--radius-lg);
- padding: var(--space-lg);
- box-shadow: var(--shadow-sm);
- transition: var(--transition);
-}
-.related-card:hover {
- transform: translateY(-1px);
- box-shadow: var(--shadow-md);
-}
-.related-meta {
- display: flex;
- flex-wrap: wrap;
- gap: 12px;
- color: var(--text-muted);
- font-size: var(--text-sm);
- margin-bottom: var(--space-sm);
-}
-.related-category {
- color: var(--primary);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- font-weight: var(--font-semibold);
-}
-.related-title {
- margin: 0 0 var(--space-sm) 0;
- font-size: var(--text-xl);
- font-weight: var(--font-semibold);
- color: var(--text-primary);
-}
-.related-link {
- color: inherit;
- text-decoration: none;
-}
-.related-link:hover { color: var(--primary); }
-.related-excerpt {
- color: var(--text-secondary);
- margin: 0 0 var(--space-md) 0;
-}
-.related-footer {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.related-author {
- color: var(--text-muted);
- font-size: var(--text-sm);
-}
-.related-read {
- color: var(--primary);
- text-decoration: none;
- font-weight: var(--font-semibold);
-}
-.related-read:hover { text-decoration: underline; }
-
-/* Article Responsive Design */
-@media (max-width: 768px) {
- .blog-post .container {
- padding: var(--space-xl) var(--space-md);
- }
-
- .article-meta {
- flex-direction: column;
- gap: var(--space-sm);
- }
-
- .article-title {
- font-size: var(--text-3xl);
- }
-
- .article-excerpt {
- font-size: var(--text-lg);
- }
-
- .article-content h2 {
- font-size: var(--text-2xl);
- }
-
- .article-content h3 {
- font-size: var(--text-xl);
- }
-
- .article-content p,
- .article-content li {
- font-size: var(--text-base);
- }
-
- .article-image-placeholder {
- height: 250px;
- font-size: var(--text-lg);
- }
-
- .share-buttons {
- flex-wrap: wrap;
- }
-
- .related-grid {
- grid-template-columns: 1fr;
- }
-}
-
-@media (max-width: 480px) {
- .breadcrumb {
- font-size: var(--text-xs);
- }
-
- .article-title {
- font-size: var(--text-2xl);
- }
-
- .article-content {
- font-size: var(--text-sm);
- }
-
- .article-image-placeholder {
- height: 200px;
- }
-}
-
-/* Responsive adjustments for full-width blog images */
-@media (max-width: 480px) {
- .article-image-section {
- margin-left: -16px;
- margin-right: -16px;
- }
-}
-
-/* Ensure full-width images work with both real images and placeholders */
-.article-image .featured-image,
-.article-image .article-image-placeholder {
- width: 100%;
- height: auto;
- display: block;
-}
-
-
-
diff --git a/digital-branding.html b/digital-branding.html
index dd18131..cb3fb2f 100644
--- a/digital-branding.html
+++ b/digital-branding.html
@@ -14,6 +14,7 @@
+
@@ -622,6 +623,60 @@
.race-grid { grid-template-columns: 1fr; }
}
+
+
+
diff --git a/img/og-image.png b/img/og-image.png
new file mode 100644
index 0000000..59dfd74
Binary files /dev/null and b/img/og-image.png differ
diff --git a/index.html b/index.html
index 81244e4..5b41c03 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,21 @@
Quantum Tasks AI — AI & Cybersecurity Solutions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -804,6 +819,74 @@
.hero-trust-items { gap: 14px; }
}
+
+
+
diff --git a/js/script.js b/js/script.js
deleted file mode 100644
index c2c5c0c..0000000
--- a/js/script.js
+++ /dev/null
@@ -1,537 +0,0 @@
-/* ================================================================
- Quantum Tasks AI - Static Website JavaScript
- ================================================================ */
-
-// Smooth scrolling for anchor links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
- anchor.addEventListener('click', function (e) {
- e.preventDefault();
- const target = document.querySelector(this.getAttribute('href'));
- if (target) {
- target.scrollIntoView({
- behavior: 'smooth',
- block: 'start'
- });
- }
- });
-});
-
-// ================================================================
-// CONTACT FORM HANDLER
-// ================================================================
-
-class ContactFormHandler {
- constructor() {
- this.form = document.getElementById('contactForm');
- this.submitBtn = document.getElementById('submitBtn');
- this.messagesDiv = document.getElementById('form-messages');
- this.messageTextarea = document.getElementById('message');
- this.messageCounter = document.getElementById('message-count');
-
- if (this.form) {
- this.init();
- }
- }
-
- init() {
- this.setupEventListeners();
- if (this.messageTextarea && this.messageCounter) {
- this.updateCharCounter();
- }
- }
-
- setupEventListeners() {
- this.form.addEventListener('submit', this.handleSubmit.bind(this));
-
- if (this.messageTextarea) {
- this.messageTextarea.addEventListener('input', this.updateCharCounter.bind(this));
- }
-
- // Real-time validation
- ['name', 'email', 'company', 'subject', 'message'].forEach(fieldName => {
- const field = document.getElementById(fieldName);
- if (field) {
- field.addEventListener('blur', () => this.validateField(fieldName));
- field.addEventListener('input', () => this.clearFieldError(fieldName));
- }
- });
- }
-
- updateCharCounter() {
- if (!this.messageTextarea || !this.messageCounter) return;
-
- const length = this.messageTextarea.value.length;
- this.messageCounter.textContent = length;
-
- const counter = this.messageCounter.parentElement;
- counter.classList.remove('warning', 'error');
-
- if (length > 900) {
- counter.classList.add('error');
- } else if (length > 800) {
- counter.classList.add('warning');
- }
- }
-
- validateField(fieldName) {
- const field = document.getElementById(fieldName);
- const errorDiv = document.getElementById(`${fieldName}-error`);
-
- if (!field || !errorDiv) return true;
-
- const value = field.value.trim();
- let isValid = true;
- let errorMessage = '';
-
- switch(fieldName) {
- case 'name':
- if (value.length < 2) {
- errorMessage = 'Name must be at least 2 characters long';
- isValid = false;
- } else if (value.length > 100) {
- errorMessage = 'Name must be less than 100 characters';
- isValid = false;
- } else if (!/^[a-zA-Z\s\-\.']+$/.test(value)) {
- errorMessage = 'Name contains invalid characters';
- isValid = false;
- }
- break;
-
- case 'email':
- if (!value || value.length > 254) {
- errorMessage = 'Please provide a valid email address';
- isValid = false;
- } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
- errorMessage = 'Please enter a valid email format';
- isValid = false;
- }
- break;
-
- case 'company':
- if (value && value.length > 100) {
- errorMessage = 'Company name must be less than 100 characters';
- isValid = false;
- }
- break;
-
- case 'subject':
- if (!value) {
- errorMessage = 'Please select a subject';
- isValid = false;
- }
- break;
-
- case 'message':
- if (value.length < 10) {
- errorMessage = 'Message must be at least 10 characters long';
- isValid = false;
- } else if (value.length > 1000) {
- errorMessage = 'Message must be less than 1000 characters';
- isValid = false;
- }
- break;
- }
-
- if (isValid) {
- field.classList.remove('error');
- errorDiv.textContent = '';
- } else {
- field.classList.add('error');
- errorDiv.textContent = errorMessage;
- }
-
- return isValid;
- }
-
- clearFieldError(fieldName) {
- const field = document.getElementById(fieldName);
- const errorDiv = document.getElementById(`${fieldName}-error`);
-
- if (field) field.classList.remove('error');
- if (errorDiv) errorDiv.textContent = '';
- }
-
- validateForm() {
- const fields = ['name', 'email', 'subject', 'message'];
- let isValid = true;
-
- fields.forEach(fieldName => {
- if (!this.validateField(fieldName)) {
- isValid = false;
- }
- });
-
- // Validate company if provided
- const company = document.getElementById('company');
- if (company && company.value.trim() && !this.validateField('company')) {
- isValid = false;
- }
-
- return isValid;
- }
-
- showMessage(message, type = 'success') {
- if (!this.messagesDiv) return;
-
- this.messagesDiv.className = `form-messages ${type}`;
- this.messagesDiv.textContent = message;
- this.messagesDiv.style.display = 'block';
-
- // Scroll to message
- this.messagesDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-
- // Auto-hide success messages after 10 seconds
- if (type === 'success') {
- setTimeout(() => {
- this.messagesDiv.style.display = 'none';
- }, 10000);
- }
- }
-
- setLoading(loading) {
- if (!this.submitBtn) return;
-
- const btnText = this.submitBtn.querySelector('.btn-text');
- const btnLoading = this.submitBtn.querySelector('.btn-loading');
-
- if (loading) {
- if (btnText) btnText.style.display = 'none';
- if (btnLoading) btnLoading.style.display = 'flex';
- this.submitBtn.disabled = true;
- } else {
- if (btnText) btnText.style.display = 'inline';
- if (btnLoading) btnLoading.style.display = 'none';
- this.submitBtn.disabled = false;
- }
- }
-
- async handleSubmit(e) {
- e.preventDefault();
-
- // Clear previous messages
- if (this.messagesDiv) {
- this.messagesDiv.style.display = 'none';
- }
-
- // Validate form
- if (!this.validateForm()) {
- this.showMessage('Please correct the errors above.', 'error');
- return;
- }
-
- this.setLoading(true);
-
- // Since this is a static site, we'll just show a success message
- // and reset the form (no actual form submission to backend)
- setTimeout(() => {
- this.showMessage(
- 'Thank you for your message! We have received your inquiry and will get back to you within 24 hours. ' +
- 'For urgent matters, please email us directly at abhay@quantumtaskai.com',
- 'success'
- );
-
- this.form.reset();
- if (this.messageTextarea && this.messageCounter) {
- this.updateCharCounter();
- }
-
- // Clear any field errors
- ['name', 'email', 'company', 'subject', 'message'].forEach(fieldName => {
- this.clearFieldError(fieldName);
- });
-
- this.setLoading(false);
- }, 1500);
- }
-}
-
-// ================================================================
-// DIGITAL BRANDING PAGE INTERACTIONS
-// ================================================================
-
-class DigitalBrandingManager {
- constructor() {
- this.processCards = document.querySelectorAll('.process-step-card');
- this.raceCards = document.querySelectorAll('.race-card');
- this.serviceCards = document.querySelectorAll('.service-card');
- this.ctaButtons = document.querySelectorAll('.cta-btn');
-
- if (this.processCards.length > 0 || this.raceCards.length > 0 || this.serviceCards.length > 0) {
- this.init();
- }
- }
-
- init() {
- this.setupCardInteractions();
- this.setupButtonHovers();
- this.addScrollAnimations();
- }
-
- setupCardInteractions() {
- // Process step cards
- this.processCards.forEach(card => {
- card.addEventListener('mouseenter', () => {
- this.highlightCard(card);
- });
-
- card.addEventListener('mouseleave', () => {
- this.removeHighlight(card);
- });
- });
-
- // RACE framework cards
- this.raceCards.forEach(card => {
- card.addEventListener('mouseenter', () => {
- this.highlightCard(card);
- });
-
- card.addEventListener('mouseleave', () => {
- this.removeHighlight(card);
- });
- });
-
- // Service cards
- this.serviceCards.forEach(card => {
- card.addEventListener('mouseenter', () => {
- this.highlightCard(card);
- });
-
- card.addEventListener('mouseleave', () => {
- this.removeHighlight(card);
- });
- });
- }
-
- highlightCard(card) {
- card.style.transform = 'translateY(-4px)';
- card.style.boxShadow = '0 20px 40px rgba(30, 64, 175, 0.15)';
- }
-
- removeHighlight(card) {
- card.style.transform = 'translateY(0)';
- card.style.boxShadow = '';
- }
-
- setupButtonHovers() {
- this.ctaButtons.forEach(button => {
- button.addEventListener('mouseenter', () => {
- button.style.transform = 'translateY(-2px)';
- });
-
- button.addEventListener('mouseleave', () => {
- button.style.transform = '';
- });
-
- button.addEventListener('click', (e) => {
- if (!button.classList.contains('loading')) {
- button.classList.add('loading');
- const originalText = button.textContent;
- button.textContent = '⏳ Loading...';
-
- setTimeout(() => {
- if (button.classList.contains('loading')) {
- button.classList.remove('loading');
- button.textContent = originalText;
- }
- }, 2000);
- }
- });
- });
- }
-
- addScrollAnimations() {
- if ('IntersectionObserver' in window) {
- const observerOptions = {
- threshold: 0.1,
- rootMargin: '0px 0px -50px 0px'
- };
-
- const observer = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- entry.target.style.opacity = '1';
- entry.target.style.transform = 'translateY(0)';
- }
- });
- }, observerOptions);
-
- // Observe cards for scroll animations
- [...this.processCards, ...this.raceCards, ...this.serviceCards].forEach((card, index) => {
- card.style.opacity = '0';
- card.style.transform = 'translateY(20px)';
- card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
- observer.observe(card);
- });
-
- // Observe sections
- document.querySelectorAll('.section-header, .cta-content').forEach(section => {
- section.style.opacity = '0';
- section.style.transform = 'translateY(20px)';
- section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
- observer.observe(section);
- });
- }
- }
-}
-
-// ================================================================
-// GENERAL ANIMATIONS AND INTERACTIONS
-// ================================================================
-
-class GeneralInteractions {
- constructor() {
- this.init();
- }
-
- init() {
- this.setupScrollAnimations();
- this.setupCardHovers();
- this.setupButtonEffects();
- }
-
- setupScrollAnimations() {
- if ('IntersectionObserver' in window) {
- const observerOptions = {
- threshold: 0.1,
- rootMargin: '0px 0px -50px 0px'
- };
-
- const observer = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- entry.target.classList.add('animate-in');
- }
- });
- }, observerOptions);
-
- // Observe elements for animations
- document.querySelectorAll('.service-card, .client-card, .achievement-item, .trust-card').forEach(card => {
- observer.observe(card);
- });
- }
- }
-
- setupCardHovers() {
- // Add hover effects to all interactive cards
- document.querySelectorAll('.service-card, .client-card, .choice-card, .quick-access-card').forEach(card => {
- card.addEventListener('mouseenter', () => {
- card.style.transform = 'translateY(-4px)';
- });
-
- card.addEventListener('mouseleave', () => {
- card.style.transform = 'translateY(0)';
- });
- });
- }
-
- setupButtonEffects() {
- // Add click effects to buttons
- document.querySelectorAll('.btn-primary, .btn-secondary').forEach(button => {
- button.addEventListener('click', (e) => {
- // Create ripple effect
- const ripple = document.createElement('span');
- const rect = button.getBoundingClientRect();
- const size = Math.max(rect.width, rect.height);
- const x = e.clientX - rect.left - size / 2;
- const y = e.clientY - rect.top - size / 2;
-
- ripple.style.width = ripple.style.height = size + 'px';
- ripple.style.left = x + 'px';
- ripple.style.top = y + 'px';
- ripple.classList.add('ripple');
-
- button.appendChild(ripple);
-
- setTimeout(() => {
- ripple.remove();
- }, 600);
- });
- });
- }
-}
-
-// ================================================================
-// INITIALIZATION
-// ================================================================
-
-document.addEventListener('DOMContentLoaded', function() {
- // Initialize contact form handler
- new ContactFormHandler();
-
- // Initialize digital branding interactions
- new DigitalBrandingManager();
-
- // Initialize general interactions
- new GeneralInteractions();
-
- // Add loading animation to external links
- document.querySelectorAll('a[href^="http"]:not([href*="quantumtaskai.com"])').forEach(link => {
- link.addEventListener('click', function() {
- const originalText = this.textContent;
- this.style.opacity = '0.7';
- this.textContent = '⏳ Loading...';
-
- setTimeout(() => {
- this.style.opacity = '1';
- this.textContent = originalText;
- }, 2000);
- });
- });
-
- // Smooth loading for app links
- document.querySelectorAll('a[href*="app.quantumtaskai.com"]').forEach(link => {
- link.addEventListener('click', function(e) {
- // Add loading state
- this.style.opacity = '0.8';
- const originalText = this.textContent;
- this.textContent = '🚀 Launching...';
-
- // Reset after a short delay if user comes back
- setTimeout(() => {
- this.style.opacity = '1';
- this.textContent = originalText;
- }, 3000);
- });
- });
-});
-
-// Add CSS for ripple effect
-const rippleCSS = `
-.ripple {
- position: absolute;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.6);
- transform: scale(0);
- animation: ripple-animation 0.6s ease-out;
- pointer-events: none;
-}
-
-@keyframes ripple-animation {
- to {
- transform: scale(4);
- opacity: 0;
- }
-}
-
-.animate-in {
- animation: slideUp 0.6s ease-out;
-}
-
-@keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(30px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-`;
-
-// Inject CSS
-const style = document.createElement('style');
-style.textContent = rippleCSS;
-document.head.appendChild(style);
-
-
diff --git a/robots.txt b/robots.txt
new file mode 100644
index 0000000..c395274
--- /dev/null
+++ b/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://quantumtaskai.com/sitemap.xml
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 0000000..242a48e
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,18 @@
+
+
+
+
+ https://quantumtaskai.com
+ 2025-04-15
+ weekly
+ 1.0
+
+
+
+ https://quantumtaskai.com/digital-branding.html
+ 2025-04-15
+ monthly
+ 0.8
+
+
+