/* Modern Light Theme Variables (Orange & Green Accents) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-card: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4b5563;

    /* Accents */
    --accent-orange: #f97316;
    /* Orange-500 */
    --accent-green: #10b981;
    /* Emerald-500 */
    --accent-color: var(--accent-orange);
    /* Main interaction color */

    --accent-hover: #ea580c;
    --accent-glow: rgba(249, 115, 22, 0.2);

    --border-color: #e5e7eb;
    --success-color: var(--accent-green);

    /* Gradients */
    --gradient-hero: radial-gradient(circle at top right, rgba(249, 115, 22, 0.15), transparent 40%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.15), transparent 40%);

    --gradient-text: linear-gradient(135deg, #111827 30%, #f97316 100%);

    --transition-speed: 0.3s;
    --max-width: 1200px;
    --nav-height: 70px;
    --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

/* Global Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed) ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

h1 {
    font-size: 3.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Utilities */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 5rem 0;
}

.text-gradient {
    /* Subtle gradient for emphasis */
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    /* Slightly squarer for professional look */
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--accent-orange);
    color: white;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.2);
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    border-color: var(--text-primary);
    background: var(--bg-secondary);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(15, 23, 42, 0.9);
    /* Premium Dark Slate with transparency */
    backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}



.logo-link {
    text-decoration: none;
    display: block;
}

.logo-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align */
    line-height: 1;
}

.logo-name {
    font-weight: 800;
    font-size: 1.25rem;
    color: #f9fafb;
    /* White */
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.logo-surname {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 30%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    font-size: 0.95rem;
    color: #d1d5db;
    /* Gray-300 */
    font-weight: 500;
}

.nav-link:hover {
    color: var(--accent-orange);
}

.nav-cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.nav-cta.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.lang-switch {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.lang-btn {
    background: none;
    border: 2px solid transparent;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
    opacity: 0.7;
    filter: grayscale(100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lang-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lang-btn:hover {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

.lang-btn.active {
    opacity: 1;
    filter: grayscale(0%);
    border-color: var(--accent-orange);
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

/* Hero Section */
.hero {
    min-height: auto;
    /* Removed 100vh constraint */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: calc(var(--nav-height) + 3rem);
    /* Adjusted padding */
    padding-bottom: 3rem;
    background: var(--gradient-hero);
}

.hero-content {
    text-align: center;
    max-width: 900px;
    /* Slightly wider to prevent too many line breaks */
}

.hero-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: rgba(249, 115, 22, 0.1);
    color: var(--accent-orange);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero-avatar {
    width: 120px;
    /* Reduced from 150px */
    height: 120px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: var(--shadow-hover);
    margin: 0 auto 1.5rem;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

h1 {
    font-size: 3rem;
    /* Reduced from 3.5rem */
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all var(--transition-speed);
    box-shadow: var(--shadow-soft);
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-orange);
    box-shadow: var(--shadow-hover);
}

.service-icon {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--accent-orange);
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 20px;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* Featured Work (Portfolio) */
.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.portfolio-item {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-speed);
}

.portfolio-item:hover {
    box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
    .portfolio-item {
        flex-direction: row;
    }

    .portfolio-image {
        width: 40%;
    }

    .portfolio-content {
        width: 60%;
    }
}

.portfolio-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portfolio-image {
    background: var(--bg-secondary);
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 3rem;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

.achievement-badge {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    /* Darker amber for better contrast on white */
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* Trust / Experience */
.trust-section {
    text-align: center;
    background: var(--bg-secondary);
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: 3rem;
}

.trust-logo {
    height: 60px;
    /* Increased from 40px */
    width: auto;
    object-fit: contain;
    transition: all var(--transition-speed);
}

.trust-logo:hover {
    transform: scale(1.1);
}

/* Trust Section Typography */
.trust-section p {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.trust-subtext {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0;
    color: #9ca3af !important;
    /* Gray-400 forced */
}

.inline-link {
    color: var(--accent-orange);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

.inline-link:hover {
    color: var(--accent-hover);
    text-decoration: none;
}


.company-name {
    display: none;
}

@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
        border-color: transparent;
    }

    50% {
        box-shadow: 0 0 20px 0 rgba(249, 115, 22, 0.2);
        border-color: var(--accent-orange);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
        border-color: transparent;
    }
}

.highlight-effect {
    animation: borderPulse 2s ease-out 1;
    /* Pulse 1 time */
    border-color: var(--accent-orange);
    /* Ensure border color is visible during animation context if needed, though keyframes drive it */
}

/* Contact Footer */
.footer {
    background: #0f172a;
    /* Deep Dark Slate */
    color: #f8fafc;
    /* Slate-50 */
    padding: 6rem 0 12rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 640px) {
    .footer {
        padding-bottom: 16rem;
    }
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Deprecated Social Links replaced by direct-contact-box */

/* Helper for hiding/showing language content */
[data-lang] {
    transition: opacity 0.3s ease;
}

/* Dark Theme footer adjustments */
.direct-contact-box {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #1e293b;
    /* Slate-800 */
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 400px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #f9fafb;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
}

.contact-row:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.contact-row img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.contact-row span {
    font-size: 1.05rem;
    font-weight: 500;
}

/* Invert github icon if needed */
.contact-row[href*="github"] img {
    filter: invert(1);
}

.footer p {
    color: #9ca3af;
    /* Gray-400 */
}

.footer h2,
.footer h4 {
    color: white;
}

/* Alternating Backgrounds */
#services {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .portfolio-grid {
        gap: 2rem;
    }
}

.portfolio-grid {
    gap: 2rem;
}

/* Contact Section (New) */
.contact-section {
    background: #ffffff;
    /* White background */
    border-top: 1px solid var(--border-color);
}

.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: start;
    }
}

.contact-info {
    color: var(--text-primary);
    /* Dark text for white bg */
}

.contact-info h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.step-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.step-num {
    background: rgba(249, 115, 22, 0.1);
    color: var(--accent-orange);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-item p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0;
}

.pricing-note {
    background: var(--bg-secondary);
    /* Light gray for note */
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.pricing-note p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.pricing-note p:last-child {
    margin-bottom: 0;
}

.highlight-text {
    color: var(--accent-green);
    font-weight: 600;
}

.section-header {
    margin-bottom: 3rem;
    color: var(--text-primary);
    text-align: left;
    /* Explicitly left align to fix inconsistency */
}

.section-header.text-center {
    text-align: center;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    /* Limit width for readability */
}

/* Footer Simplified */
.footer-simple {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border: 2px solid transparent;
    /* Permanent border to prevent layout shift */
    border-radius: 16px;
    /* Match highlight radius */
    padding: 1rem;
    /* Add padding to match highlight state */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .footer-links-list {
        flex-direction: row;
        gap: 3rem;
    }
}

.simple-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #cbd5e1;
    /* Slate-300 */
    font-size: 1.1rem;
    transition: all 0.2s;
}

.simple-contact-link:hover {
    color: var(--accent-orange);
    transform: translateY(-2px);
}

.simple-contact-link img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Cleanup old specific styles if necessary (override them) */
.footer-content,
.footer-form-column,
.footer-contacts-column {
    display: none;
    /* Hide old structure remnants if any exist */
}


/* Contact Form Styles */
.contact-form {
    background: #1e293b;
    /* Slate-800 - reverting to dark card */
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #e2e8f0;
    /* Slate-200 */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    /* Darker input bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

/* Form Validation Styles */
.contact-form input.invalid {
    border-color: #ef4444;
    /* Red-500 */
    background: rgba(239, 68, 68, 0.1);
}

.contact-form input.invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--bg-card);
    padding: 2.5rem;
    border-radius: 1rem;
    width: 100%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s;
    padding: 0.5rem;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

/* Form Styles for Modal */
.modal-content .form-group {
    margin-bottom: 1.5rem;
}

.modal-content .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.modal-content input,
.modal-content textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    /* Slate-300 for better visibility */
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s;
    background-color: #ffffff;
    color: var(--text-primary);
}

.modal-content input:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.modal-content button[type="submit"] {
    margin-top: 1rem;
    width: 100%;
}

/* Navigation & Logo Updates */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.home-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    /* Brighter: White instead of text-secondary */
    font-size: 2rem;
    /* Larger */
    transition: all 0.2s ease;
    text-decoration: none;
    opacity: 0.9;
}

.home-icon-link:hover {
    color: var(--accent-orange);
    opacity: 1;
    transform: scale(1.1);
}

/* CTA Block Styles */
.cta-block {
    background-color: var(--bg-secondary);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin-top: 3rem;
    border: 1px solid var(--border-color);
}

.cta-question {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.cta-link {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-orange);
    text-decoration: underline;
    transition: color 0.2s;
    display: inline-block;
}

.cta-link:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

/* Mobile Menu Implementation */
/* Navigation Actions Container */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Mobile Menu Implementation */
.burger-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #f8fafc;
    /* Slate-50 */
    font-size: 2rem;
    cursor: pointer;
    z-index: 1100;
    padding: 0.25rem;
    transition: color 0.2s;
}

.burger-menu-btn:hover {
    color: var(--accent-orange);
}

@media (max-width: 1024px) {
    /* Hide desktop text links by default (they are in the drawer) */
    /* Wait, we need to hide the container of links, not all nav-links if we reuse class */
    /* In HTML, .nav-links is the drawer now. */

    .burger-menu-btn {
        display: block;
    }

    .nav-actions {
        gap: 0.75rem;
        /* Tighter gap on mobile */
    }

    /* Adjust CTA for mobile header to be always visible and compact */
    .nav-cta {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        display: inline-block !important;
        /* Force display if hidden by other rules */
    }

    /* Force show CTA? If user wants it ALWAYS, we remove opacity: 0 logic or add a modifier. 
       Let's assume standard behavior first, but make sure it CAN show. 
       If user meant 'always', they would say 'always'. 'Appearing' might mean 'can appear'.
       Actually, 'appearing in the header for mobile layout' sounds like 'enable it'.
       Current JS: .visible added on scroll.
       I will keep that behavior but ensure layout fits.
    */

    /* Drawer Styles */
    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--nav-height));
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(12px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
    }

    .nav-links.active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-link {
        font-size: 1.5rem;
        font-weight: 600;
        margin-right: 0 !important;
    }

    /* Logo scaling */
    .nav-logo {
        flex-shrink: 1;
        /* Allow shrinking */
        min-width: 0;
        /* Allow flex item to shrink below content size */
        margin-right: 0.5rem;
    }

    .logo-text-wrapper {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logo-name,
    .logo-surname {
        font-size: 1rem;
        /* Smaller font */
    }
}

@media (max-width: 480px) {

    /* Even smaller mobile tweaks */
    .nav-actions {
        gap: 0.5rem;
    }

    .nav-cta {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .logo-surname {
        display: none !important;
        /* Hide surname on very small screens if needed, strictly optionally. 
       User complained about crawling. Let's try just shrinking font first. */
        /* Actually, user said 'name/surname begins to crawl'. 
          Hiding surname is a common pattern. 
          Or maybe just 'V. Preobrazhenskiy'? 
          Let's stick to font shrinkage first. */
    }

    .logo-name {
        font-size: 1.1rem;
    }

    .logo-surname {
        font-size: 0.9rem;
    }
}

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    width: 90%;
    max-width: 800px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    z-index: 9999;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cookie-banner.visible {
    transform: translateX(-50%) translateY(0);
}

.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cookie-text {
    flex: 1;
}

.cookie-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.cookie-text a {
    color: var(--accent-orange);
    text-decoration: underline;
    font-size: 0.9rem;
}

.cookie-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-cookie {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cookie-primary {
    background: var(--accent-orange);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2);
}

.btn-cookie-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(249, 115, 22, 0.3);
}

.btn-cookie-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-cookie-secondary:hover {
    border-color: var(--text-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .cookie-banner {
        width: 95%;
        padding: 1.25rem;
        bottom: 15px;
    }

    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .cookie-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .btn-cookie {
        flex: 1;
        text-align: center;
    }
}