/* --- Google Font Imports (Already in HTML, but good practice) --- */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- CSS Variables Base & Reset --- */
:root {
    --font-ubuntu: 'Ubuntu', sans-serif;
    --font-roboto: 'Roboto', sans-serif;
    --font-poppins: 'Poppins', sans-serif;

    /* Transitions */
    --transition-fast: 0.2s;
    --transition-medium: 0.4s;
    --transition-slow: 0.6s;
    --transition-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
    --transition-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Layout & Spacing */
    --container-width: 1240px;
    --container-padding: 20px;
    --section-padding-y: 110px; /* Vertical padding for sections */
    --gap-default: 30px;
    --gap-large: 60px;

    /* Borders & Shadows */
    --border-radius-small: 5px;
    --border-radius-medium: 10px;
    --border-radius-large: 15px;
    --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.07);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 20px 50px rgba(0, 0, 0, 0.15);

    /* Typography Base */
    --fs-base: 1rem; /* Default font size (usually 16px) */
    --fs-small: 0.875rem; /* 14px */
    --fs-large: 1.125rem; /* 18px */
    --fs-xl: 1.25rem; /* 20px */
    --fs-h1: clamp(2.5rem, 6vw, 4rem); /* Responsive H1 */
    --fs-h2: clamp(2rem, 5vw, 3rem);   /* Responsive H2 */
    --fs-h3: clamp(1.5rem, 4vw, 2rem);   /* Responsive H3 */
    --fs-h4: 1.25rem;
    --fs-h5: 1.1rem;
    --fs-h6: 1rem;

    --lh-base: 1.7;
    --lh-heading: 1.3;

    /* Z-Indexes */
    --z-preloader: 10000;
    --z-modal: 1050;
    --z-dropdown: 1010;
    --z-sticky-nav: 1000;
    --z-fixed-ui: 990; /* Toggles, sidebars etc. */
    --z-overlay: 10;
    --z-background: -1;

    /* Default Scrollbar (can be themed) */
    --scrollbar-track-color: #1a1a1a;
    --scrollbar-thumb-color: #c89f3e;
    --scrollbar-width: 8px;
}

/* --- Theme Definitions --- */
[data-theme="dark-gold"] {
    --primary-bg: #0B0B0B;
    --secondary-bg: #121212;
    --tertiary-bg: #050505; /* Even darker for accents */
    --primary-text: #d1d1d1;
    --secondary-text: #909090;
    --heading-color: #f5f5f5;
    --accent-color: #c89f3e; /* Gold */
    --accent-hover: #d4ac50; /* Lighter Gold */
    --accent-rgb: 200, 159, 62;
    --border-color: rgba(var(--accent-rgb), 0.1);
    --border-strong: rgba(var(--accent-rgb), 0.3);
    --cta-bg: var(--accent-color);
    --cta-text-color: #000000;
    --cta-hover-bg: var(--accent-hover);
    --shadow-accent-soft: rgba(var(--accent-rgb), 0.08);
    --shadow-accent-medium: rgba(var(--accent-rgb), 0.15);
    --hero-bg-gradient-start: rgba(var(--accent-rgb), 0.05);
    --hero-bg-gradient-end: transparent;
    --cta-overlay: linear-gradient(45deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.15));
    --scrollbar-track-color: #1a1a1a;
    --scrollbar-thumb-color: var(--accent-color);
}
[data-theme="light-gold"] {
    --primary-bg: #ffffff;
    --secondary-bg: #f9f9f9;
    --tertiary-bg: #f1f1f1;
    --primary-text: #3a3a3a;
    --secondary-text: #6a6a6a;
    --heading-color: #151515;
    --accent-color: #b88f30; /* Slightly darker gold for light bg */
    --accent-hover: #c89f3e;
    --accent-rgb: 184, 143, 48;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.15);
    --cta-bg: var(--accent-color);
    --cta-text-color: #ffffff;
    --cta-hover-bg: var(--accent-hover);
    --shadow-accent-soft: rgba(var(--accent-rgb), 0.1);
    --shadow-accent-medium: rgba(var(--accent-rgb), 0.2);
    --hero-bg-gradient-start: rgba(var(--accent-rgb), 0.05);
    --hero-bg-gradient-end: transparent;
    --cta-overlay: linear-gradient(45deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.15));
    --scrollbar-track-color: #f1f1f1;
    --scrollbar-thumb-color: var(--accent-color);
    --logo-filter: none;
}
[data-theme="high-contrast-bw"] {
    --primary-bg: #000000;
    --secondary-bg: #0a0a0a;
    --tertiary-bg: #111111; /* Slightly lighter black */
    --primary-text: #ffffff;
    --secondary-text: #f0f0f0;
    --heading-color: #ffffff;
    --accent-color: #ffffff; /* White accent */
    --accent-hover: #f5f5f5;
    --accent-rgb: 255, 255, 255;
    --border-color: rgba(var(--accent-rgb), 0.25);
    --border-strong: rgba(var(--accent-rgb), 0.6);
    --cta-bg: var(--accent-color);
    --cta-text-color: #000000;
    --cta-hover-bg: #e0e0e0; /* Slightly grey hover */
    --shadow-accent-soft: rgba(var(--accent-rgb), 0.1);
    --shadow-accent-medium: rgba(var(--accent-rgb), 0.2);
    --hero-bg-gradient-start: rgba(var(--accent-rgb), 0.04);
    --hero-bg-gradient-end: transparent;
    --cta-overlay: linear-gradient(45deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.15));
    --scrollbar-track-color: #222;
    --scrollbar-thumb-color: var(--accent-color);
    --logo-filter: brightness(0) invert(1);
}
[data-theme="blue-tech"] {
    --primary-bg: #0a192f; /* Navy */
    --secondary-bg: #112240; /* Lighter Navy */
    --tertiary-bg: #051020; /* Darker Navy */
    --primary-text: #abb2bf; /* Light grey/blue */
    --secondary-text: #8892b0; /* Slate blue */
    --heading-color: #e6f1ff; /* Lightest blue */
    --accent-color: #64ffda; /* Cyan/Teal */
    --accent-hover: #7fffe8; /* Lighter Cyan */
    --accent-rgb: 100, 255, 218;
    --border-color: rgba(var(--accent-rgb), 0.1);
    --border-strong: rgba(var(--accent-rgb), 0.3);
    --cta-bg: var(--accent-color);
    --cta-text-color: #0a192f; /* Dark Navy text on cyan */
    --cta-hover-bg: var(--accent-hover);
    --shadow-accent-soft: rgba(var(--accent-rgb), 0.1);
    --shadow-accent-medium: rgba(var(--accent-rgb), 0.2);
    --hero-bg-gradient-start: rgba(var(--accent-rgb), 0.07);
    --hero-bg-gradient-end: transparent;
    --cta-overlay: linear-gradient(45deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.15));
    --scrollbar-track-color: #112240;
    --scrollbar-thumb-color: var(--accent-color);
    --logo-filter: brightness(0) invert(1); /* Adjust if logo needs specific filtering */
}

/* --- Base Styles & Resets --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background-color: var(--accent-color); color: var(--cta-text-color); }
::-moz-selection { background-color: var(--accent-color); color: var(--cta-text-color); }

html {
    scroll-behavior: smooth;
    font-size: var(--fs-base);
    -webkit-tap-highlight-color: transparent;
    height: 100%; /* Needed for some effects potentially */
}
body {
    background-color: var(--primary-bg); color: var(--primary-text);
    line-height: var(--lh-base); font-weight: 300; /* Lighter base weight */
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-medium) ease, color var(--transition-medium) ease;
    overflow-x: hidden; /* Prevent horizontal scroll */
    display: flex; /* For potential footer sticking */
    flex-direction: column; /* For potential footer sticking */
    min-height: 100%; /* Ensure body takes full height */
}

/* Apply Font Family & Size from HTML attributes */
[data-font-family="ubuntu"] { font-family: var(--font-ubuntu); }
[data-font-family="roboto"] { font-family: var(--font-roboto); }
[data-font-family="poppins"] { font-family: var(--font-poppins); }
[data-font-size="small"] { font-size: var(--fs-small); }
[data-font-size="medium"] { font-size: var(--fs-base); }
[data-font-size="large"] { font-size: var(--fs-large); }

main { flex: 1 0 auto; } /* Allow main content to grow and push footer down */
footer { flex-shrink: 0; } /* Prevent footer from shrinking */

img, video, svg { max-width: 100%; height: auto; display: block; vertical-align: middle; }
a { color: var(--accent-color); text-decoration: none; transition: color var(--transition-fast) ease; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 700; line-height: var(--lh-heading); margin-bottom: 0.8em; transition: color var(--transition-medium) ease; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-bottom: 0.8em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5 { font-size: var(--fs-h5); font-weight: 500; }
h6 { font-size: var(--fs-h6); font-weight: 500; }
p { margin-bottom: 1.2em; color: var(--primary-text); max-width: 65ch; } /* Limit paragraph width for readability */
strong, b { font-weight: 700; color: var(--heading-color); }
ul, ol { list-style-position: inside; padding-left: 1em; /* Add some padding for list markers */ }
li { margin-bottom: 0.5em; }
::marker { color: var(--accent-color); }
blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5em;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--secondary-text);
}
hr { border: none; height: 1px; background-color: var(--border-color); margin: 2em 0; }

/* --- Utility Classes --- */
.container { width: 100%; max-width: var(--container-width); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
.content-section { padding: var(--section-padding-y) 0; }
.bg-primary { background-color: var(--primary-bg); }
.bg-secondary { background-color: var(--secondary-bg); }
.bg-tertiary { background-color: var(--tertiary-bg); }
.highlight-gold { color: var(--accent-color); transition: color var(--transition-medium) ease; }
.text-stroke { -webkit-text-stroke: 1px var(--accent-color); color: transparent; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.section-title.align-left { text-align: left; }
.section-title.align-left::after { left: 0; transform: none; }
.section-subtitle.narrow { max-width: 650px; margin-left: auto; margin-right: auto;} /* For centered subtitles */
.view-all-cta { text-align: center; margin-top: 40px; }

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
::-webkit-scrollbar-track { background: var(--scrollbar-track-color); }
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: calc(var(--scrollbar-width) / 2); border: 2px solid var(--scrollbar-track-color); }
::-webkit-scrollbar-thumb:hover { background-color: var(--accent-hover); }
/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); }

/* --- Accessibility: Skip Link --- */
.skip-link {
    position: absolute; top: -100px; /* Further off-screen initially */ left: 0; background: var(--accent-color); color: var(--cta-text-color);
    padding: 10px 15px; z-index: calc(var(--z-preloader) + 1); /* Above preloader */ transition: top 0.3s ease-out; font-weight: 500; border-bottom-right-radius: var(--border-radius-small);
}
.skip-link:focus { top: 0; }

/* --- Preloader --- */
#preloader { position: fixed; inset: 0; /* Simpler positioning */ background-color: var(--primary-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: var(--z-preloader); opacity: 1; visibility: visible; transition: opacity var(--transition-slow) ease var(--transition-fast), visibility 0s linear var(--transition-slow); }
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-logo { font-family: var(--font-ubuntu); font-size: 3.5rem; font-weight: 700; color: var(--accent-color); margin-bottom: 15px; animation: pulseLogo 1.5s infinite alternate ease-in-out; }
.preloader-spinner { width: 50px; height: 50px; border: 4px solid var(--border-color); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
.preloader-text { color: var(--secondary-text); font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; animation: fadeInOut 1.5s infinite alternate ease-in-out; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulseLogo { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.05); opacity: 1; } }
@keyframes fadeInOut { from { opacity: 0.5; } to { opacity: 1; } }

/* --- Customization Panel --- */
.customization-toggle {
    position: fixed; top: 120px; left: -5px; /* Start slightly hidden */
    background-color: rgba(var(--accent-rgb), 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: var(--cta-text-color); border: none; width: 50px; height: 50px; border-top-right-radius: var(--border-radius-medium); border-bottom-right-radius: var(--border-radius-medium); font-size: 1.5rem; cursor: pointer; z-index: var(--z-fixed-ui); transition: all var(--transition-medium) var(--transition-bezier); box-shadow: 3px 3px 12px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center;
}
.customization-toggle i { transition: transform var(--transition-medium) ease; }
.customization-toggle:hover { left: 0; background-color: var(--accent-hover); transform: scale(1.05); }
.customization-toggle:hover i { transform: rotate(180deg); }
.customization-panel { position: fixed; top: 0; left: -320px; /* Fully hidden */ width: 300px; max-width: 90vw; height: 100vh; background-color: var(--secondary-bg); box-shadow: 5px 0 25px rgba(0,0,0,0.2); z-index: calc(var(--z-fixed-ui) + 1); transition: left var(--transition-medium) var(--transition-bezier); display: flex; flex-direction: column; border-left: 3px solid var(--accent-color); }
.customization-panel.visible { left: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: var(--tertiary-bg); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.panel-title { margin-bottom: 0; font-size: 1.1rem; color: var(--heading-color); font-weight: 500; }
.close-panel-button { background: none; border: none; color: var(--secondary-text); font-size: 1.8rem; cursor: pointer; padding: 0; /* Remove padding for better alignment */ line-height: 1; transition: color var(--transition-fast) ease, transform var(--transition-fast) ease; }
.close-panel-button:hover { color: var(--accent-color); transform: rotate(90deg); }
.panel-content { padding: 25px 20px; overflow-y: auto; flex-grow: 1; }
.setting-group { margin-bottom: 30px; }
.setting-label { display: block; font-size: 0.95rem; color: var(--secondary-text); margin-bottom: 10px; font-weight: 500; }
.color-mode-options, .text-size-options, .font-family-options { display: flex; gap: 10px; flex-wrap: wrap; }
.color-option span { display: block; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease; border: 2px solid transparent; }
.color-option { background: none; border: none; padding: 2px; }
.color-option.active span { transform: scale(1.1); box-shadow: 0 0 0 3px var(--accent-color); border-color: var(--secondary-bg); /* Inner border effect */ }
.color-option:hover:not(.active) span { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.5); }
.text-size-options button, .font-family-options button { background-color: var(--tertiary-bg); border: 1px solid var(--border-color); color: var(--primary-text); padding: 8px 15px; border-radius: var(--border-radius-small); cursor: pointer; font-family: inherit; /* Use body font */ transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease; }
.text-size-options button.active, .font-family-options button.active { background-color: var(--accent-color); color: var(--cta-text-color); border-color: var(--accent-color); font-weight: 500; }
.text-size-options button:hover:not(.active), .font-family-options button:hover:not(.active) { border-color: var(--accent-color); color: var(--accent-color); background-color: rgba(var(--accent-rgb), 0.1); }
.motion-toggle-button { position: relative; display: inline-block; width: 50px; height: 26px; background-color: var(--tertiary-bg); border: 1px solid var(--border-color); border-radius: 13px; cursor: pointer; transition: background-color var(--transition-medium) ease; vertical-align: middle; /* Align with label */ }
.toggle-track { display: block; width: 100%; height: 100%; border-radius: 13px; }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: var(--secondary-text); border-radius: 50%; transition: transform var(--transition-medium) ease, background-color var(--transition-medium) ease; }
.motion-toggle-button[aria-checked="true"] { background-color: var(--accent-color); }
.motion-toggle-button[aria-checked="true"] .toggle-thumb { transform: translateX(24px); background-color: var(--primary-bg); } /* Use primary bg for contrast */

/* --- Fixed Social Bar --- */
.fixed-social-bar { position: fixed; top: 50%; right: 15px; transform: translateY(-50%); background-color: rgba(var(--primary-bg), 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 15px 10px; border-radius: var(--border-radius-large); display: flex; flex-direction: column; gap: 18px; z-index: var(--z-fixed-ui); border: 1px solid var(--border-color); }
.fixed-social-bar a { color: var(--secondary-text); font-size: 1.2rem; transition: color var(--transition-fast) ease, transform var(--transition-fast) ease; position: relative; display: block; /* Ensure tooltip positioning works well */ }
.fixed-social-bar a:hover { color: var(--accent-color); transform: scale(1.2); }
.fixed-social-bar a[data-tooltip]::before { content: attr(data-tooltip); position: absolute; right: 130%; top: 50%; transform: translateY(-50%) scale(0.8); background-color: var(--tertiary-bg); color: var(--primary-text); padding: 4px 8px; border-radius: var(--border-radius-small); font-size: 0.8rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease, right var(--transition-fast) ease; pointer-events: none; border: 1px solid var(--border-color); }
.fixed-social-bar a[data-tooltip]:hover::before { opacity: 1; transform: translateY(-50%) scale(1); right: 140%; }
html, body { overflow-x: hidden; }
/* --- Main Header & Navigation --- */
.main-header { position: absolute; top: 0; left: 0; width: 100%; z-index: var(--z-sticky-nav); /* Below dropdowns */ }
.main-nav { padding: 15px 0; transition: background-color var(--transition-medium) ease, padding var(--transition-medium) ease, box-shadow var(--transition-medium) ease; will-change: background-color, padding; }
.main-nav.scrolled { position: fixed; top: 0; left: 0; right: 0; /* Ensure full width */ padding: 1px 0; background-color: rgba(var(--primary-bg), 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-medium); animation: slideDown 0.5s ease-out forwards; /* Keep final state */ z-index: var(--z-sticky-nav); }
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { flex-shrink: 0; } /* Prevent logo from shrinking */
.logo-image { max-height: 65px; width: auto; transition: filter var(--transition-medium) ease; filter: var(--logo-filter); /* Use theme variable */ }
.main-nav.scrolled .logo-image { max-height: 65px; /* Slightly smaller logo on scroll */ }

/* Desktop Navigation Links */
.nav-links { list-style: none; display: flex; align-items: center; gap: 45px; }
.nav-link { color: var(--primary-text); font-weight: 500; font-size: 1rem; position: relative; padding: 10px 0; transition: color var(--transition-fast) ease; white-space: nowrap; /* Prevent wrapping */ }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent-color); transition: width var(--transition-medium) var(--transition-bezier); }
.nav-link:hover, .nav-link.active { color: var(--accent-color); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
/* Dropdown Base */
.dropdown { position: relative; }
.has-dropdown { display: flex; align-items: center; } /* Align text and icon */
.has-dropdown .dropdown-icon { font-size: 0.75em; margin-left: 6px; vertical-align: middle; transition: transform var(--transition-medium) ease; }
.dropdown.hover > .has-dropdown { color: var(--accent-color); /* Keep parent active looking */ }
.dropdown.hover > .has-dropdown .dropdown-icon { transform: rotate(180deg); }
/* Dropdown Menu */
.dropdown-menu { list-style: none; position: absolute; top: calc(100% + 5px); /* Add slight gap */ left: 0; background-color: var(--secondary-bg); min-width: 250px; border-radius: var(--border-radius-medium); box-shadow: var(--shadow-large); padding: 10px 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity var(--transition-fast) ease, visibility 0s linear var(--transition-fast), transform var(--transition-fast) ease; border: 1px solid var(--border-color); z-index: var(--z-dropdown); }
.dropdown.hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s, 0s, 0s; /* Ensure visibility transition is immediate */ }
.dropdown-menu li { padding: 0; margin: 0; } /* Reset list item padding/margin */
.dropdown-menu li a { display: block; padding: 12px 20px; color: var(--primary-text); font-size: 0.95rem; white-space: nowrap; transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease; }
.dropdown-menu li a:hover, .dropdown-menu li a:focus, .dropdown-menu li a.active { background-color: rgba(var(--accent-rgb), 0.1); color: var(--accent-color); outline: none; }

/* Mega Dropdown Specifics */
.mega-dropdown .dropdown-menu { left: 50%; transform: translateX(-50%) translateY(10px); width: max-content; max-width: calc(100vw - 40px); /* Prevent viewport overflow */ padding: 20px; transition: opacity var(--transition-medium) ease, visibility 0s linear var(--transition-medium), transform var(--transition-medium) ease; }
.dropdown.hover .mega-dropdown .dropdown-menu { transform: translateX(-50%) translateY(0); }
.mega-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */ gap: var(--gap-default); }
.mega-menu-column .mega-menu-heading { font-size: 1rem; color: var(--heading-color); margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.mega-menu-column .mega-menu-heading i { color: var(--accent-color); }
.mega-menu-column ul { list-style: none; padding: 0; margin: 0; }
.mega-menu-column ul li { margin-bottom: 10px; }
.mega-menu-column ul li a { display: block; color: var(--secondary-text); font-size: 0.9rem; padding: 5px 0; transition: color var(--transition-fast) ease, padding-left var(--transition-fast) ease; }
.mega-menu-column ul li a:hover, .mega-menu-column ul li a.active { color: var(--accent-color); padding-left: 5px; }
.mega-menu-column.featured-service { background-color: var(--tertiary-bg); padding: 20px; border-radius: var(--border-radius-medium); border-left: 3px solid var(--accent-color); }
.mega-menu-column.featured-service img { border-radius: var(--border-radius-small); margin-bottom: 15px; }
.mega-menu-column.featured-service h5 { font-size: 1.05rem; color: var(--heading-color); margin-bottom: 10px; }
.mega-menu-column.featured-service p { font-size: 0.85rem; color: var(--secondary-text); margin-bottom: 15px; max-width: none; } /* Override paragraph width */
.mega-menu-column.featured-service .link-arrow.small { font-size: 0.9rem; }

/* Navigation Controls & Hamburger */
.nav-controls { display: flex; align-items: center; gap: 15px; }
.nav-cta.small { padding: 8px 20px; font-size: 0.9rem; }
.hamburger-menu { display: none; /* Hidden by default */ width: 30px; height: 24px; position: relative; cursor: pointer; background: none; border: none; z-index: calc(var(--z-modal)); /* Above mobile menu */ padding: 0; /* Remove padding */ }
.hamburger-line { display: block; width: 100%; height: 2px; background-color: var(--heading-color); position: absolute; left: 0; transition: transform var(--transition-medium) ease, top var(--transition-medium) ease 0s, bottom var(--transition-medium) ease 0s, opacity var(--transition-medium) ease; border-radius: 1px; }
.line-1 { top: 0; }
.line-2 { top: 50%; transform: translateY(-50%); }
.line-3 { bottom: 0; }
/* Hamburger Active State */
.hamburger-menu.active .line-1 { top: 50%; transform: translateY(-50%) rotate(45deg); transition-delay: 0s, var(--transition-fast); }
.hamburger-menu.active .line-2 { opacity: 0; }
.hamburger-menu.active .line-3 { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); transition-delay: 0s, var(--transition-fast); }

/* Mobile Menu */
.mobile-menu { display: none; /* Initially hidden, JS toggles */ flex-direction: column; position: fixed; top: 0; right: -100%; /* Start off-screen */ width: 320px; max-width: 90vw; height: 100vh; background-color: var(--secondary-bg); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); z-index: calc(var(--z-modal) - 1); /* Below hamburger */ transition: right var(--transition-medium) var(--transition-bezier); overflow-y: auto; }
.mobile-menu.active { display: flex; right: 0; }
.mobile-menu-content { flex-grow: 1; padding-top: 80px; /* Space for header */ }
.mobile-menu .nav-link { color: var(--primary-text); padding: 18px 30px; font-size: 1.1rem; font-weight: 500; transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease; border-bottom: 1px solid var(--border-color); display: block; width: 100%; /* Ensure full width */ text-align: left; }
.mobile-menu .nav-link::after { display: none; /* No underline needed */ }
.mobile-menu .nav-link:hover, .mobile-menu .nav-link.active { background-color: rgba(var(--accent-rgb), 0.1); color: var(--accent-color); }
.mobile-menu-footer { margin-top: auto; padding: 30px; border-top: 1px solid var(--border-color); background-color: var(--tertiary-bg); flex-shrink: 0; text-align: center; }
.mobile-cta { width: 100%; margin-bottom: 20px; display: inline-block; /* Correct display */ }
.mobile-socials { text-align: center; }
.mobile-socials a { color: var(--secondary-text); font-size: 1.4rem; margin: 0 12px; transition: color var(--transition-fast) ease; }
.mobile-socials a:hover { color: var(--accent-color); }

/* --- Hero Section --- */
#hero {
    min-height: 100vh; /* Full viewport height */
    display: flex; align-items: center;
    padding: 150px 0 80px; /* Top padding accounts for nav, bottom for prompt */
    position: relative; overflow: hidden;
    background: radial-gradient(ellipse at 70% 40%, var(--hero-bg-gradient-start) 0%, var(--hero-bg-gradient-end) 70%), var(--primary-bg);
}
.hero-background-shapes { position: absolute; inset: 0; z-index: var(--z-background); pointer-events: none; }
.shape { position: absolute; border-radius: 50%; background: var(--accent-color); opacity: 0.04; filter: blur(80px); }
.shape-1 { width: 400px; height: 400px; top: -50px; left: -100px; animation: floatLarge 12s infinite ease-in-out alternate; }
.shape-2 { width: 300px; height: 300px; bottom: -100px; right: -50px; animation: floatLarge 15s infinite ease-in-out alternate; animation-delay: -2s; }
.shape-3 { width: 250px; height: 250px; top: 20%; right: 10%; animation: floatLarge 13s infinite ease-in-out alternate; animation-delay: -1s; }
@keyframes floatLarge { from { transform: translate(0, 0) scale(0.9); } to { transform: translate(20px, -30px) scale(1.1); } }
.hero-container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap-large); align-items: center; }
.hero-content-area { /* No specific styles needed, relies on grid */ }
.hero-subtitle { display: inline-block; background: rgba(var(--accent-rgb), 0.1); color: var(--accent-color); padding: 6px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; margin-bottom: 20px; border: 1px solid rgba(var(--accent-rgb), 0.2); }
.hero-headline { margin-bottom: 25px; line-height: 1.2; font-weight: 700; }
.hero-description { font-size: var(--fs-large); color: var(--secondary-text); margin-bottom: 40px; max-width: 600px; font-weight: 300; }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.hero-actions .link-icon { font-size: 1rem; color: var(--primary-text); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.hero-actions .link-icon i { color: var(--accent-color); font-size: 1.2em; transition: transform var(--transition-fast) ease; }
.hero-actions .link-icon:hover { color: var(--accent-color); }
.hero-actions .link-icon:hover i { transform: translateX(3px); } /* Subtle arrow move */

.hero-visual-area { position: relative; }
.hero-figure { margin: 0; position: relative; }
.hero-main-visual {
    max-width: 100%; height: auto;
    border-radius: var(--border-radius-large);
    transform: perspective(1500px) rotateY(-8deg) rotateX(3deg) scale(1.05);
    box-shadow: var(--shadow-large);
    transition: transform var(--transition-slow) ease;
    will-change: transform;
}
.hero-visual-area:hover .hero-main-visual { transform: perspective(1500px) rotateY(0) rotateX(0) scale(1); }
.hero-visual-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, transparent 50%, rgba(var(--primary-bg), 0.5) 100%); border-radius: var(--border-radius-large); pointer-events: none; }
.hero-scroll-prompt { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; opacity: 0.7; }
.hero-scroll-prompt a { color: var(--secondary-text); display: block; padding: 10px; animation: bounceSimple 2s infinite ease-in-out; }
.hero-scroll-prompt i { font-size: 1.5rem; }
.hero-scroll-prompt a:hover { color: var(--accent-color); opacity: 1; animation-play-state: paused; }
@keyframes bounceSimple { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* --- Clients Section --- */
.clients-section { padding: 50px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.client-logos .swiper-wrapper { align-items: center; transition-timing-function: linear !important; /* Essential for smooth linear scroll */ }
.client-logo img { max-height: 85px; width: auto; margin: 0 auto; filter: brightness(0.8) grayscale(100%) contrast(1.1); opacity: 0.6; transition: filter var(--transition-medium) ease, opacity var(--transition-medium) ease; }
[data-theme="light-gold"] .client-logo img { filter: grayscale(100%) contrast(0.9) brightness(1.1); opacity: 0.5; } /* Adjust for light theme visibility */
.client-logo:hover img { filter: none; opacity: 1; }

/* --- Services Section --- */
.section-header { text-align: center; margin-bottom: var(--gap-large); }
.section-tagline { display: inline-block; font-size: 0.9rem; font-weight: 500; color: var(--accent-color); margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.section-header .section-title { margin-bottom: 15px; }
.section-header .section-subtitle { color: var(--secondary-text); font-size: var(--fs-large); max-width: 750px; margin-left: auto; margin-right: auto; }
.services-grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */ gap: var(--gap-default); }
.service-card-detailed {
    background-color: var(--secondary-bg); padding: 40px 35px; border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); transition: transform var(--transition-medium) ease, box-shadow var(--transition-medium) ease, border-color var(--transition-medium) ease; position: relative; overflow: hidden; display: flex; flex-direction: column; /* Ensure footer links align */
}
.service-card-detailed::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-medium) var(--transition-bezier); }
.service-card-detailed:hover { transform: translateY(-10px); box-shadow: var(--shadow-medium); border-color: var(--border-strong); }
.service-card-detailed:hover::before { transform: scaleX(1); }
.service-card-icon { font-size: 2.8rem; color: var(--accent-color); margin-bottom: 25px; display: inline-block; line-height: 1; }
.service-card-title { font-size: 1.4rem; margin-bottom: 15px; color: var(--heading-color); }
.service-card-description { color: var(--primary-text); font-size: 0.95rem; margin-bottom: 25px; line-height: 1.6; flex-grow: 1; /* Push features/link down */ }
.service-card-features { list-style: none; padding-left: 0; margin-bottom: 30px; font-size: 0.9rem; color: var(--secondary-text); }
.service-card-features li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.service-card-features li::before { content: '\2713'; /* Checkmark */ position: absolute; left: 0; top: 1px; color: var(--accent-color); font-weight: bold; }
.service-card-detailed .link-arrow { margin-top: auto; /* Pushes link to bottom */ }

/* Wide Service Card Style */
.service-card-detailed.wide-card {
    grid-column: 1 / -1; /* Span full width */ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gap-default); padding: 35px;
}
.wide-card .service-card-icon { margin-bottom: 0; font-size: 3.5rem; }
.wide-card div:nth-of-type(1) { /* Target the div containing title/desc/features */ flex-grow: 1; }
.wide-card .service-card-title { margin-bottom: 5px; }
.wide-card .service-card-description { margin-bottom: 15px; flex-grow: 0; /* Override flex-grow */ }
.wide-card .service-card-features { margin-bottom: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.wide-card .service-card-features li { margin-bottom: 0; padding-left: 0; }
.wide-card .service-card-features li::before { display: none; } /* Hide checkmarks */
.wide-card .link-arrow { margin-left: auto; margin-top: 0; }

/* --- Differentiators Section --- */
.differentiators-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-large); align-items: center; }
.differentiators-image-area img { border-radius: var(--border-radius-large); box-shadow: var(--shadow-medium); }
.differentiators-content-area .section-tagline,
.differentiators-content-area .section-title { text-align: left; }
.differentiators-content-area > p { font-size: var(--fs-large); color: var(--primary-text); margin-bottom: var(--gap-default); }
.differentiator-list { list-style: none; padding: 0; margin: 0 0 var(--gap-default) 0; }
.differentiator-list li { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 25px; }
.differentiator-list li i { font-size: 1.8rem; color: var(--accent-color); margin-top: 5px; flex-shrink: 0; width: 30px; text-align: center; }
.differentiator-list li h4 { font-size: 1.2rem; color: var(--heading-color); margin-bottom: 5px; }
.differentiator-list li p { color: var(--secondary-text); font-size: 0.95rem; margin-bottom: 0; line-height: 1.6; max-width: none; /* Override paragraph width limit */ }

/* --- Process Section --- */
.process-steps-container { display: flex; justify-content: space-between; align-items: flex-start; position: relative; margin-top: 70px; padding: 0 5%; /* Add padding to prevent steps touching edges */ }
.process-step { text-align: center; position: relative; z-index: 1; width: 18%; /* Adjust width as needed */ display: flex; flex-direction: column; align-items: center; }
.step-number { font-size: 3.5rem; font-weight: 700; color: var(--border-strong); line-height: 1; margin-bottom: -10px; opacity: 0.5; }
.step-icon { font-size: 3rem; color: var(--accent-color); margin-bottom: 15px; display: inline-flex; /* Use flex for centering */ align-items: center; justify-content: center; background: var(--primary-bg); padding: 15px; /* Increase padding */ width: 80px; /* Fixed size */ height: 80px; /* Fixed size */ border-radius: 50%; line-height: 1; border: 1px solid var(--border-color); /* Add subtle border */ }
.step-title { font-size: 1.15rem; color: var(--heading-color); margin-bottom: 10px; font-weight: 600; }
.step-description { font-size: 0.9rem; color: var(--secondary-text); line-height: 1.5; }
.process-connector { height: 2px; background-color: var(--border-color); flex-grow: 1; margin: 0 -15px; /* Overlap slightly */ position: absolute; top: 65px; /* Align with middle of icon */ left: 14%; /* Start after first half-step approx */ right: 14%; /* End before last half-step approx */ z-index: 0; }

/* --- Portfolio Section --- */
.portfolio-filter-buttons { text-align: center; margin-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.filter-button { background-color: var(--secondary-bg); border: 1px solid var(--border-color); color: var(--primary-text); padding: 10px 25px; border-radius: 20px; cursor: pointer; font-size: 0.95rem; font-weight: 500; /* Removed margin, using gap */ transition: all var(--transition-fast) ease; }
.filter-button:hover { background-color: rgba(var(--accent-rgb), 0.1); color: var(--accent-color); border-color: var(--accent-color); }
.filter-button.active { background-color: var(--accent-color); color: var(--cta-text-color); border-color: var(--accent-color); }
/* Masonry Grid */
.portfolio-grid-masonry { column-count: 3; column-gap: var(--gap-default); }
.portfolio-item { margin-bottom: var(--gap-default); break-inside: avoid-column; display: block; position: relative; overflow: hidden; border-radius: var(--border-radius-medium); box-shadow: var(--shadow-soft); transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease; border: 1px solid var(--border-color); }
.portfolio-item.hide { opacity: 0; transform: scale(0.9); pointer-events: none; /* Make hidden items non-interactive */ }
.portfolio-figure { position: relative; margin: 0; cursor: pointer; display: block; /* Ensure figure behaves like a block */ }
.portfolio-figure img { display: block; width: 100%; height: auto; transition: transform var(--transition-slow) ease; }
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-caption { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); padding: 40px 20px 20px; color: #fff; opacity: 0; transform: translateY(20px); transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease; pointer-events: none; /* Allow clicks on the image */ }
.portfolio-item:hover .portfolio-caption { opacity: 1; transform: translateY(0); }
.portfolio-caption h3 { color: #fff; font-size: 1.3rem; margin-bottom: 5px; }
.portfolio-caption p { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-bottom: 10px; max-width: none; /* Override limit */ }
.portfolio-tags { font-size: 0.8rem; color: var(--accent-color); font-weight: 500; }

/* --- Tech Stack Section --- */
.tech-stack-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-large); align-items: center; }
.tech-stack-content .section-title { margin-bottom: 20px; }
.tech-stack-content p { font-size: var(--fs-large); color: var(--primary-text); margin-bottom: var(--gap-default); font-weight: 300; }
.tech-stack-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 400px; }
.tech-logo-orbit { position: relative; width: 300px; height: 300px; /* Base size */ }
.orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: var(--accent-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 700; color: var(--cta-text-color); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4); }
.tech-logo { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px; /* Half of width/height */ background-color: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; color: var(--secondary-text); box-shadow: var(--shadow-soft); animation: orbit 15s linear infinite; transition: color var(--transition-fast) ease, background-color var(--transition-fast) ease; }
.tech-logo:hover { background-color: var(--tertiary-bg); color: var(--accent-color); cursor: help; animation-play-state: paused; /* Pause orbit on hover */ }
.tech-logo::after { content: attr(data-tooltip); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%) scale(0); background: var(--tertiary-bg); padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap; opacity: 0; transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease; pointer-events: none; border: 1px solid var(--border-color); z-index: 1; /* Ensure tooltip is above other logos */ }
.tech-logo:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
/* Distribute logos evenly using animation delay */
.tech-logo.logo-1 { animation-delay: calc(15s / -8 * 0); }
.tech-logo.logo-2 { animation-delay: calc(15s / -8 * 1); }
.tech-logo.logo-3 { animation-delay: calc(15s / -8 * 2); }
.tech-logo.logo-4 { animation-delay: calc(15s / -8 * 3); }
.tech-logo.logo-5 { animation-delay: calc(15s / -8 * 4); }
.tech-logo.logo-6 { animation-delay: calc(15s / -8 * 5); }
.tech-logo.logo-7 { animation-delay: calc(15s / -8 * 6); }
.tech-logo.logo-8 { animation-delay: calc(15s / -8 * 7); }
@keyframes orbit { from { transform: rotate(0deg) translateX(150px) rotate(0deg); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }

/* --- Testimonials Section --- */
.testimonial-slider-v2 { padding-bottom: 50px; /* Space for pagination */ position: relative; /* For pagination positioning */ }
.testimonial-slide-v2 { height: auto; /* Let content determine height */ display: flex; /* Ensure card stretches */ }
.testimonial-card-v2 {
    display: flex; flex-direction: column; justify-content: space-between; height: 100%; background-color: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-large); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow var(--transition-medium) ease;
}
.testimonial-card-v2:hover { box-shadow: var(--shadow-medium); }
.testimonial-content-v2 { padding: 40px 40px 20px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
.testimonial-text-v2 { font-size: var(--fs-large); color: var(--primary-text); line-height: 1.8; margin-bottom: 30px; font-style: italic; flex-grow: 1; position: relative; padding-left: 30px; /* Space for quote icon */ }
.testimonial-text-v2::before { /* Quote icon */ content: '\201C'; /* Left double quotation mark */ font-family: Georgia, serif; font-size: 4rem; color: var(--accent-color); opacity: 0.2; position: absolute; left: -5px; top: -10px; line-height: 1; }
.testimonial-author-v2 { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: auto; /* Pushes author to bottom */ padding-top: 20px; border-top: 1px solid var(--border-color); }
.testimonial-author-v2 img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
.author-info { text-align: left; }
.author-name { display: block; font-weight: 600; color: var(--heading-color); font-size: 1rem; }
.author-title { display: block; font-size: 0.9rem; color: var(--secondary-text); }
.testimonial-rating { background-color: var(--tertiary-bg); padding: 15px 40px; text-align: center; border-top: 1px solid var(--border-color); flex-shrink: 0; /* Prevent shrinking */ }
.testimonial-rating i { color: #f39c12; /* Fixed gold for stars */ font-size: 1rem; margin: 0 2px; }
/* Swiper Pagination for Testimonials */
.testimonial-pagination-v2 { position: absolute; bottom: 10px !important; /* Position below cards */ left: 50% !important; transform: translateX(-50%) !important; width: auto !important; }
.testimonial-pagination-v2 .swiper-pagination-bullet { background-color: var(--secondary-text); opacity: 0.7; transition: background-color var(--transition-fast) ease, opacity var(--transition-fast) ease; }
.testimonial-pagination-v2 .swiper-pagination-bullet-active { background-color: var(--accent-color); opacity: 1; }

/* --- About Section --- */
.about-grid-v2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-large); align-items: center; }
.about-visual img { border-radius: var(--border-radius-large); box-shadow: var(--shadow-medium); }
.about-content .section-title { margin-bottom: 20px; }
.about-content > p { font-size: var(--fs-large); margin-bottom: var(--gap-default); color: var(--primary-text); font-weight: 300; }
.about-mission-vision { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-default); margin: 30px 0; padding: 30px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.about-mission-vision > div { /* Style each mission/vision block */ }
.about-mission-vision i { font-size: 2rem; color: var(--accent-color); margin-bottom: 15px; display: block; }
.about-mission-vision h4 { font-size: 1.2rem; color: var(--heading-color); margin-bottom: 10px; }
.about-mission-vision p { font-size: 0.95rem; color: var(--secondary-text); margin-bottom: 0; line-height: 1.6; max-width: none; }

/* --- Team Preview Section --- */
.team-preview-grid { display: flex; justify-content: center; align-items: stretch; /* Align items vertically */ gap: var(--gap-default); flex-wrap: wrap; margin-top: 40px; }
.team-member-preview { text-align: center; transition: transform var(--transition-medium) ease; width: 200px; /* Fixed width for consistency */ display: flex; flex-direction: column; /* Stack elements vertically */ }
.team-member-preview img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px auto; /* Center horizontally */ border: 4px solid var(--border-color); filter: grayscale(50%); transition: all var(--transition-medium) ease; flex-shrink: 0; /* Prevent image shrinking */ }
.team-member-preview h5 { font-size: 1.1rem; color: var(--heading-color); margin-bottom: 3px; font-weight: 500; }
.team-member-preview span { font-size: 0.9rem; color: var(--secondary-text); display: block; margin-bottom: auto; /* Push link down if needed */ }
.team-member-preview .link-arrow { margin-top: 10px; } /* Space before link */
.team-member-preview:hover img { filter: grayscale(0%); transform: scale(1.05); border-color: var(--accent-color); }
.team-member-preview:hover { transform: translateY(-5px); }
/* Join Us Card Specifics */
.join-us {
    display: flex; flex-direction: column; justify-content: center; align-items: center; /* Keep content centered */
    width: 200px; /* Match other cards */
    border: 2px dashed var(--border-strong); border-radius: var(--border-radius-medium); /* Use medium radius */ background: rgba(var(--secondary-bg), 0.5); cursor: pointer; transition: all var(--transition-medium) ease; padding: 20px; /* Add padding */
}
.join-us i { font-size: 2.5rem; color: var(--secondary-text); margin-bottom: 10px; transition: color var(--transition-medium) ease; }
.join-us h5 { margin-bottom: 5px; /* Reduced margin */ color: var(--heading-color); }
.join-us:hover { border-color: var(--accent-color); background: rgba(var(--accent-rgb), 0.05); }
.join-us:hover i { color: var(--accent-color); }
.join-us:hover h5 { color: var(--accent-color); }

/* --- Blog Preview Section --- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap-default); }
.blog-post-card { background-color: var(--secondary-bg); border-radius: var(--border-radius-medium); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow var(--transition-medium) ease; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.blog-post-card:hover { box-shadow: var(--shadow-medium); }
.post-image-link { display: block; position: relative; overflow: hidden; }
.post-image-link img { transition: transform var(--transition-medium) ease; }
.blog-post-card:hover .post-image-link img { transform: scale(1.05); }
.post-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.post-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.8rem; color: var(--secondary-text); }
.post-category { background-color: rgba(var(--accent-rgb), 0.1); color: var(--accent-color); padding: 3px 8px; border-radius: var(--border-radius-small); font-weight: 500; }
.post-date { /* No extra styles needed */ }
.post-title { font-size: 1.3rem; margin-bottom: auto; /* Push link to bottom */ padding-bottom: 15px; /* Space before link */ }
.post-title a { color: var(--heading-color); transition: color var(--transition-fast) ease; }
.post-title a:hover { color: var(--accent-color); }
.blog-post-card .link-arrow { margin-top: 15px; } /* Ensure consistent spacing */

/* --- Main CTA Section --- */
.main-cta-section { text-align: center; background-color: var(--secondary-bg); padding: var(--section-padding-y) 0; }
.main-cta-container { /* No specific styles needed */ }
.main-cta-content { max-width: 800px; margin: 0 auto; }
.cta-icon { font-size: 4rem; color: var(--accent-color); margin-bottom: 25px; display: inline-block; animation: rocketPulse 2s infinite ease-in-out; }
@keyframes rocketPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) rotate(5deg); } }
.main-cta-title { font-size: var(--fs-h2); color: var(--heading-color); margin-bottom: 20px; line-height: 1.2; }
.main-cta-description { font-size: var(--fs-large); color: var(--primary-text); margin-bottom: 40px; font-weight: 300; }
.cta-button.extra-large-cta { padding: 18px 45px; font-size: 1.2rem; font-weight: 600; }
.extra-large-cta i { font-size: 1.1em; margin-left: 10px; vertical-align: middle; }

/* --- Contact Section --- */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap-large); }
.contact-form-area { /* Container for form */ }
.contact-details-area { /* Container for details card and map */ }
.contact-details-card { background-color: var(--secondary-bg); padding: 40px; border-radius: var(--border-radius-large); border: 1px solid var(--border-color); margin-bottom: var(--gap-default); }
.contact-details-card h4 { font-size: 1.4rem; color: var(--accent-color); margin-bottom: 25px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.contact-item { margin-bottom: 25px; display: flex; align-items: flex-start; gap: 15px; }
.contact-item i { color: var(--accent-color); font-size: 1.2rem; width: 20px; text-align: center; flex-shrink: 0; margin-top: 3px; /* Align icon slightly better */ }
.contact-item > div { /* Container for text next to icon */ }
.contact-item strong { display: block; font-size: 1rem; color: var(--heading-color); margin-bottom: 5px; }
.contact-item span, .contact-item a { font-size: 0.95rem; color: var(--primary-text); line-height: 1.6; word-break: break-word; /* Prevent long links/text overflowing */ }
.contact-item a { display: inline-block; /* Allows multiple links on one line */ transition: color var(--transition-fast) ease; }
.contact-item a:hover { color: var(--accent-hover); }
.map-link.small { font-size: 0.85rem; margin-top: 5px; display: inline-block; text-decoration: underline; }
.contact-socials { margin-top: 20px; }
.contact-socials.compact-icons a { margin-right: 15px; font-size: 1.4rem; color: var(--secondary-text); }
.contact-socials.compact-icons a:hover { color: var(--accent-color); }
.map-embed-area { border-radius: var(--border-radius-medium); overflow: hidden; border: 1px solid var(--border-color); }
.map-embed-area iframe { display: block; width: 100%; border: 0; }

/* --- Form Styles (shared between contact & newsletter) --- */
.form-row { display: flex; gap: var(--gap-default); margin-bottom: var(--gap-default); }
.form-group { position: relative; margin-bottom: var(--gap-default); width: 100%; }
.form-group.half-width { width: calc(50% - var(--gap-default) / 2); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%; padding: 18px 15px 10px 15px; /* Padding for floating label */
    border: 1px solid var(--border-strong); background-color: var(--primary-bg); color: var(--primary-text); border-radius: var(--border-radius-small); font-size: 1rem; font-family: inherit; transition: border-color var(--transition-fast) ease;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2); /* Focus ring */ }
/* Floating Labels */
.form-group label { position: absolute; left: 15px; top: 14px; /* Vertically centered */ font-size: 1rem; color: var(--secondary-text); pointer-events: none; transition: all var(--transition-fast) ease; background-color: var(--primary-bg); /* Match input background */ padding: 0 5px; /* Create gap in border */ }
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group select:valid + label { /* Use :valid for select placeholder */
    top: -8px; /* Move label up */ font-size: 0.75rem; color: var(--accent-color);
}
/* Select Specific Styles */
/* Encoding #909090 for the fill attribute */
.form-group select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20fill%3D%22%23909090%22%3E%3Cpath%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat; background-position: right 15px center; background-size: 10px auto; padding-right: 40px; /* Space for arrow */
}
.form-group select:required:invalid { color: var(--secondary-text); /* Style placeholder */ }
.form-group select option[disabled] { color: var(--secondary-text); }
.form-group select option { background-color: var(--secondary-bg); color: var(--primary-text); }
/* Select label always floats */
.form-group select + label { top: -8px; font-size: 0.75rem; color: var(--accent-color); }

/* File Upload */
.form-group.file-upload { margin-bottom: 15px; /* Less margin */ }
.file-upload-label { display: inline-block; padding: 10px 15px; border: 1px dashed var(--border-strong); border-radius: var(--border-radius-small); cursor: pointer; transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease; color: var(--secondary-text); }
.file-upload-label:hover { border-color: var(--accent-color); color: var(--accent-color); }
.file-upload-label i { margin-right: 8px; }
#file-name-display { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--primary-text); font-style: italic; }

/* Privacy Consent Checkbox */
.privacy-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; margin-bottom: var(--gap-default); }
.privacy-consent input[type="checkbox"] { margin-top: 5px; flex-shrink: 0; accent-color: var(--accent-color); /* Modern way to color checkboxes */ width: 16px; height: 16px; cursor: pointer; }
.privacy-consent label { font-size: 0.85rem; color: var(--secondary-text); line-height: 1.5; cursor: pointer; }
.privacy-consent label a { color: var(--primary-text); text-decoration: underline; }
.privacy-consent label a:hover { color: var(--accent-color); }

/* Form Feedback Area */
.form-feedback { font-size: 0.9rem; font-weight: 500; padding: 10px; border-radius: var(--border-radius-small); text-align: center; }

/* Form Validation Styles (JS can add error classes) */
.form-group input.invalid,
.form-group textarea.invalid,
.form-group select.invalid { border-color: #e74c3c !important; /* Example error color - override focus */ box-shadow: none !important; /* Remove focus shadow on invalid */ }
.form-group input:invalid,
.form-group textarea:invalid,
.form-group select:invalid {
    /* Native browser invalid styles (can be customized further) */
     box-shadow: none; /* Prevent default browser shadow */
}

/* Form Submit Button */
.form-submit-button { width: 100%; }
.form-submit-button:disabled { background-color: var(--secondary-text); cursor: not-allowed; opacity: 0.7; }

/* --- Footer --- */
.main-footer { background-color: var(--tertiary-bg); padding-top: var(--gap-large); color: var(--secondary-text); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-default); margin-bottom: var(--gap-large); }
.footer-col { /* Container for each column */ }
.footer-main { /* First column, potentially wider */ }
.footer-logo-image { max-width: 180px; margin-bottom: 20px; filter: var(--logo-filter); /* Apply theme filter */ }
.footer-tagline { font-size: 0.95rem; margin-bottom: 25px; line-height: 1.6; max-width: 400px; }
.footer-socials { display: flex; gap: 15px; margin-top: 20px; }
.footer-socials a { color: var(--secondary-text); font-size: 1.4rem; transition: color var(--transition-fast) ease, transform var(--transition-fast) ease; }
.footer-socials a:hover { color: var(--accent-color); transform: translateY(-3px); }
.footer-heading { font-size: 1.1rem; font-weight: 600; color: var(--heading-color); margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer-heading::after { /* Underline effect */ content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--accent-color); }
.footer-link-list, .footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-link-list li, .footer-contact-list li { margin-bottom: 12px; font-size: 0.95rem; }
.footer-link-list a { color: var(--secondary-text); transition: color var(--transition-fast) ease, padding-left var(--transition-fast) ease; }
.footer-link-list a:hover { color: var(--accent-color); padding-left: 5px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact-list i { margin-top: 4px; color: var(--accent-color); width: 18px; text-align: center; flex-shrink: 0; }
.footer-contact-list a { color: var(--secondary-text); }
.footer-contact-list a:hover { color: var(--accent-color); }
/* Newsletter Form */
.footer-newsletter p { margin-bottom: 15px; font-size: 0.9rem; }
.newsletter-form { display: flex; margin-top: 15px; position: relative; }
.newsletter-form input { flex-grow: 1; padding: 12px 45px 12px 15px; border-radius: var(--border-radius-small); border: 1px solid var(--border-color); background-color: var(--primary-bg); color: var(--primary-text); font-size: 0.9rem; }
.newsletter-form input:focus { outline: none; border-color: var(--accent-color); }
.newsletter-form button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: var(--accent-color); color: var(--cta-text-color); border: none; width: 34px; height: 34px; border-radius: var(--border-radius-small); font-size: 1rem; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color var(--transition-fast) ease; }
.newsletter-form button:hover { background-color: var(--accent-hover); }
.newsletter-form button:disabled { background-color: var(--secondary-text); cursor: not-allowed; opacity: 0.7;}
/* Footer Bottom Bar */
.footer-bottom { background-color: var(--primary-bg); padding: 20px 0; margin-top: var(--gap-large); text-align: center; border-top: 1px solid var(--border-color); }
.footer-bottom p { font-size: 0.9rem; color: var(--secondary-text); margin-bottom: 10px; }
.footer-legal-links a { color: var(--secondary-text); margin: 0 8px; font-size: 0.85rem; transition: color var(--transition-fast) ease; }
.footer-legal-links a:hover { color: var(--accent-color); text-decoration: underline; }
.link-separator { color: var(--secondary-text); margin: 0 5px; }

/* --- Buttons --- */
.cta-button, .secondary-cta {
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center; justify-content: center; gap: 10px;
    padding: 12px 30px; background-color: var(--cta-bg); color: var(--cta-text-color); border: 1px solid var(--cta-bg); border-radius: var(--border-radius-small); font-weight: 500; font-size: 1rem; cursor: pointer; text-align: center; transition: all var(--transition-fast) ease; position: relative; overflow: hidden; z-index: 1;
}
.cta-button.large-cta { padding: 15px 40px; font-size: 1.1rem; }
.secondary-cta { background-color: transparent; color: var(--accent-color); border-color: var(--accent-color); }
.secondary-cta:hover { background-color: rgba(var(--accent-rgb), 0.1); color: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; /* Remove shadow for secondary */ }
/* Magnetic Button Effect (JS adds class/styles) */
.magnetic-button { transition: transform 0.1s linear; /* Fast follow */ }
.magnetic-button span { display: inline-block; /* Needed for transform */ transition: transform 0.1s linear; }
.magnetic-button:hover {
    transform: none important; /* Override default hover */
    box-shadow: none important; /* Override default hover */
}
/* Add transition back on mouseleave (JS will handle this better) */

/* Link Arrow Button */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-color); font-weight: 500; font-size: 1rem; }
.link-arrow::after { content: '\2192'; /* Right arrow */ margin-left: 5px; transition: transform var(--transition-fast) ease; }
.link-arrow:hover { color: var(--accent-hover); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow.small { font-size: 0.9rem; }

/* --- Live Chat Widget --- */
.live-chat-toggle { position: fixed; bottom: 30px; right: 30px; background-color: var(--accent-color); color: var(--cta-text-color); border: none; width: 60px; height: 60px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; z-index: var(--z-fixed-ui); box-shadow: var(--shadow-large); transition: all var(--transition-medium) var(--transition-bezier); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.live-chat-toggle i { position: absolute; transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease; }
.live-chat-toggle i.fa-times { opacity: 0; transform: scale(0.5) rotate(-45deg); }
.live-chat-toggle.active { background-color: var(--secondary-bg); color: var(--accent-color); transform: rotate(360deg); border: 1px solid var(--accent-color); }
.live-chat-toggle.active i.fa-headset, /* Assuming default icon is headset */
.live-chat-toggle.active i.fa-comment { /* Or comment */ opacity: 0; transform: scale(0.5) rotate(45deg); }
.live-chat-toggle.active i.fa-times { opacity: 1; transform: scale(1) rotate(0deg); }
.live-chat-toggle:hover:not(.active) { transform: scale(1.1); background-color: var(--accent-hover); }
.live-chat-window { position: fixed; bottom: 100px; right: 30px; width: 350px; max-width: calc(100vw - 40px); height: 450px; max-height: calc(100vh - 120px); background-color: var(--secondary-bg); border-radius: var(--border-radius-large); box-shadow: var(--shadow-large); z-index: calc(var(--z-fixed-ui) - 1); /* Below toggle initially */ display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all var(--transition-medium) var(--transition-bezier); border: 1px solid var(--border-color); pointer-events: none; }
.live-chat-window.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; z-index: var(--z-fixed-ui); /* Bring above toggle when open */ }
.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: var(--tertiary-bg); border-bottom: 1px solid var(--border-color); border-top-left-radius: var(--border-radius-large); border-top-right-radius: var(--border-radius-large); flex-shrink: 0; }
.chat-header h5 { margin: 0; color: var(--heading-color); font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.chat-header h5 i { color: var(--accent-color); }
.chat-header button { background: none; border: none; color: var(--secondary-text); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 5px; }
.chat-header button:hover { color: var(--accent-color); }
.chat-body { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.chat-message { padding: 10px 15px; border-radius: 18px; max-width: 85%; line-height: 1.5; font-size: 0.95rem; word-wrap: break-word; /* Prevent long words breaking layout */ }
/* Animation handled by JS now */
/* @keyframes chatFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } */
.chat-message p { margin-bottom: 0; } /* Remove default paragraph margin */
.chat-message.bot { background-color: var(--tertiary-bg); color: var(--primary-text); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-message.user { background-color: var(--accent-color); color: var(--cta-text-color); border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-footer { display: flex; padding: 15px; border-top: 1px solid var(--border-color); gap: 10px; flex-shrink: 0; }
.chat-footer input { flex-grow: 1; padding: 10px 15px; border: 1px solid var(--border-strong); background-color: var(--primary-bg); color: var(--primary-text); border-radius: 20px; font-size: 0.9rem; }
.chat-footer input:focus { outline: none; border-color: var(--accent-color); }
.chat-footer button { background-color: var(--accent-color); color: var(--cta-text-color); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; cursor: pointer; flex-shrink: 0; transition: background-color var(--transition-fast) ease; display: flex; justify-content: center; align-items: center; }
.chat-footer button:hover { background-color: var(--accent-hover); }
.chat-footer button:disabled { background-color: var(--secondary-text); cursor: not-allowed; opacity: 0.7; }

/* --- Animations --- */
.animate-on-scroll { opacity: 0; /* Start hidden */ transition: opacity var(--transition-slow) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--transition-slow) cubic-bezier(0.645, 0.045, 0.355, 1); will-change: opacity, transform; }
.animate-on-scroll.visible { opacity: 1; transform: none !important; /* Reset transform when visible */ }
/* Initial states for different animations */
.animate-on-scroll.fade-in { transform: translateY(30px); }
.animate-on-scroll.fade-in-up { transform: translateY(60px); }
.animate-on-scroll.fade-in-left { transform: translateX(-60px); }
.animate-on-scroll.fade-in-right { transform: translateX(60px); }
.animate-on-scroll.scale-in { transform: scale(0.9); }
/* Apply delay using CSS variable */
.animate-on-scroll { transition-delay: calc(var(--delay, 0) * 1ms); /* Use ms for delay */ }

/* --- Responsive Overrides --- */

/* Large Devices (Desktops, 1200px and down) */
@media (max-width: 1200px) {
    :root { --container-width: 960px; --section-padding-y: 100px; --gap-large: 50px; }
    .portfolio-grid-masonry { column-count: 2; }
    .tech-stack-container { grid-template-columns: 1fr; text-align: center; }
    .tech-stack-content .section-title { text-align: center; }
    .tech-stack-content .section-title::after { left: 50%; transform: translateX(-50%); }
    .tech-stack-visual { margin-top: 40px; }
    .about-grid-v2, .differentiators-grid { gap: var(--gap-default); }
    .footer-grid { gap: var(--gap-default); }
}

/* Medium Devices (Tablets, 992px and down) */
@media (max-width: 992px) {
    :root { --container-width: 720px; --section-padding-y: 80px; --gap-large: 40px; --fs-base: 0.95rem; }
    .desktop-nav { display: none; }
    .hamburger-menu { display: block; }
    .nav-controls .nav-cta { display: none; } /* Hide desktop CTA */
    .hero-container { grid-template-columns: 1fr; text-align: center; gap: var(--gap-default); }
    .hero-content-area { order: 2; }
    .hero-visual-area { order: 1; max-width: 450px; margin: 0 auto 40px; }
    .hero-headline { font-size: clamp(2rem, 7vw, 3.5rem); }
    .hero-description { margin-left: auto; margin-right: auto; max-width: 90%; }
    .hero-actions { justify-content: center; }
    .services-grid-layout { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .service-card-detailed.wide-card { grid-template-columns: 1fr; text-align: center; }
    .wide-card .service-card-icon { margin-bottom: 15px; }
    .wide-card div:nth-of-type(1) { text-align: center; }
    .wide-card .service-card-features { justify-content: center; }
    .wide-card .link-arrow { margin: 20px auto 0; }
    .differentiators-grid { grid-template-columns: 1fr; text-align: center; }
    .differentiators-content-area .section-title.align-left,
    .differentiators-content-area .section-tagline { text-align: center; }
    .differentiators-content-area .section-title.align-left::after { left: 50%; transform: translateX(-50%); }
    .differentiators-image-area { max-width: 450px; margin: 0 auto 40px; }
    .process-steps-container { flex-direction: column; align-items: center; gap: 40px; padding: 0; }
    .process-step { width: 80%; max-width: 400px; }
    .process-connector { display: none; }
    .contact-grid { grid-template-columns: 1fr; gap: var(--gap-default); }
    .contact-details-area { order: -1; /* Show details first on tablet */ }
    .customization-toggle { top: 80px; /* Adjust position */ }
    .fixed-social-bar { display: none; }
    .mega-dropdown .dropdown-menu { width: 90vw; max-width: 600px; left: 5%; transform: translateX(0) translateY(10px); } /* Adjust positioning */
    .dropdown.hover .mega-dropdown .dropdown-menu { transform: translateX(0) translateY(0); }
    .mega-menu-grid { grid-template-columns: 1fr 1fr; }
    .mega-menu-column.featured-service { display: none; } /* Hide featured on smaller screens */
}

/* Small Devices (Landscape Phones, 768px and down) */
@media (max-width: 768px) {
    :root { --container-width: 540px; --section-padding-y: 60px; --gap-default: 25px; --fs-base: 0.9rem; }
    html { font-size: 15px; /* Slightly smaller base for small screens */ }
    .portfolio-grid-masonry { column-count: 1; }
    .tech-logo-orbit { width: 250px; height: 250px; }
    @keyframes orbit { from { transform: rotate(0deg) translateX(125px) rotate(0deg); } to { transform: rotate(360deg) translateX(125px) rotate(-360deg); } } /* Adjust orbit radius */
    .orbit-center { width: 60px; height: 60px; font-size: 1.2rem; }
    .tech-logo { width: 50px; height: 50px; margin: -25px; font-size: 1.5rem; }
    .testimonial-slider-v2 .swiper-slide { padding: 0 10px; } /* Add padding for smaller screens */
    .about-grid-v2 { grid-template-columns: 1fr; }
    .about-visual { max-width: 400px; margin: 0 auto 40px auto; }
    .about-mission-vision { grid-template-columns: 1fr; }
    .team-preview-grid { justify-content: space-around; } /* Better spacing */
    .team-member-preview { width: 160px; /* Adjust size */ }
    .team-member-preview img { width: 100px; height: 100px; }
    .join-us { width: 160px; height: auto; min-height: 200px; /* Adjust size */ }
    .blog-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-col { margin-bottom: 30px; }
    .footer-col:last-child { margin-bottom: 0; }
     .footer-col .footer-heading::after { left: 50%; transform: translateX(-50%); }
    .footer-about p { max-width: 100%; margin-left: auto; margin-right: auto; }
    .footer-contact-list { text-align: center; }
     .footer-contact-list li { justify-content: center; }
     .footer-contact-list i { display: none; } /* Hide icons */
     .newsletter-form { max-width: 350px; margin-left: auto; margin-right: auto; }
    .live-chat-window { width: calc(100vw - 40px); height: calc(100vh - 100px); bottom: 80px; right: 20px; max-width: none; max-height: none; }
    .live-chat-toggle { bottom: 20px; right: 20px; width: 55px; height: 55px; }
    .mega-menu-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0; margin-bottom: 0; }
    .form-group.half-width { width: 100%; margin-bottom: var(--gap-default); }
}

/* Extra Small Devices (Phones, 576px and down) */
@media (max-width: 576px) {
    :root { --section-padding-y: 50px; --container-padding: 15px; }
    .mobile-menu { width: 100%; max-width: 100%; } /* Full width mobile menu */
    .hero-headline { font-size: clamp(1.8rem, 8vw, 2.8rem); }
    .hero-description { font-size: 1rem; }
    .hero-actions { flex-direction: column; gap: 15px; align-items: center; }
    .services-grid-layout { grid-template-columns: 1fr; }
    .service-card-detailed.wide-card { grid-template-columns: 1fr; }
    .wide-card .link-arrow { margin: 20px auto 0; }
    .process-step { width: 95%; }
    .team-preview-grid { gap: 15px; }
    .team-member-preview, .join-us { width: calc(50% - 10px); /* Two columns */ }
    .customization-panel { width: 280px; left: -300px; /* Adjust if needed */ }
    .customization-toggle { width: 40px; height: 40px; font-size: 1.1rem; top: 60px; }
    .contact-grid { gap: 30px; }
    .contact-details-card { padding: 30px; }
    .footer-bottom p { font-size: 0.85rem; }
    .footer-legal-links { display: flex; flex-direction: column; gap: 5px; }
    .link-separator { display: none; }
    .testimonial-text-v2 { font-size: 1rem; padding-left: 15px; }
    .testimonial-text-v2::before { font-size: 3rem; left: -15px; top: -5px; }
}

/* --- Motion Reduction Preferences --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }
  /* Force visibility for elements that might rely on animation/transition */
  .animate-on-scroll { opacity: 1 !important; transform: none !important; }
  .magnetic-button, .magnetic-button span { transform: none !important; transition: none !important; }
  .hero-main-visual { transform: none !important; } /* Disable hero image perspective */
  #preloader { display: none; } /* Hide preloader immediately */
  .shape, .tech-logo, .cta-icon { animation: none !important; } /* Stop background/element animations */
  .hamburger-line { transition: none !important; } /* Disable hamburger transition */
  .mobile-menu { transition: none !important; } /* Disable mobile menu slide */
  .customization-panel { transition: none !important; } /* Disable panel slide */
  .customization-toggle i { transition: none !important; }
  .fixed-social-bar a:hover { transform: none !important; } /* Disable icon scale */
  .fixed-social-bar a[data-tooltip]::before { transition: none !important; opacity: 0 !important; } /* Hide tooltips */
  .live-chat-toggle { transition: none !important; }
  .live-chat-window { transition: none !important; }
}

/* Apply reduced motion via data attribute (JS controlled) */
/* DÜZELTİLMİŞ BLOK BAŞLANGICI */
[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
}
[data-reduce-motion="true"] .animate-on-scroll { opacity: 1 !important; transform: none !important; }
[data-reduce-motion="true"] .magnetic-button,
[data-reduce-motion="true"] .magnetic-button span { transform: none !important; transition: none !important; }
[data-reduce-motion="true"] .hero-main-visual { transform: none !important; }
[data-reduce-motion="true"] #preloader { display: none; }
[data-reduce-motion="true"] .shape,
[data-reduce-motion="true"] .tech-logo,
[data-reduce-motion="true"] .cta-icon { animation: none !important; }
[data-reduce-motion="true"] .hamburger-line { transition: none !important; }
[data-reduce-motion="true"] .mobile-menu { transition: none !important; }
[data-reduce-motion="true"] .customization-panel { transition: none !important; }
[data-reduce-motion="true"] .customization-toggle i { transition: none !important; }
[data-reduce-motion="true"] .fixed-social-bar a:hover { transform: none !important; }
[data-reduce-motion="true"] .fixed-social-bar a[data-tooltip]::before { transition: none !important; opacity: 0 !important; }
[data-reduce-motion="true"] .live-chat-toggle { transition: none !important; }
[data-reduce-motion="true"] .live-chat-window { transition: none !important; }
/* DÜZELTİLMİŞ BLOK SONU */