/* =============================
   NETA DESIGN IMPROVEMENTS
   Critical Contrast & Accessibility Fixes
   ============================= */

:root {
    /* Fixed color palette with improved contrast */
    --neta-primary: #0b2540;
    --neta-primary-2: #14365e;
    --neta-accent: #1f6feb;
    --neta-accent-2: #38b6ff;
    --neta-ink: #0f1623;
    /* FIXED: Improved muted text contrast for dark sections */
    --neta-muted: #5d6b80;
    --neta-muted-light: #9ca6b8;      /* Light variant for dark backgrounds */
    --neta-muted-lighter: #c0c8d9;    /* Even lighter for dark sections */
    --neta-line: #e6ebf2;
    --neta-bg-soft: #f4f7fb;
    --neta-bg-dark: #0b1a2e;
    --neta-radius: 10px;
    --neta-radius-lg: 16px;
    
    /* Error states */
    --neta-error: #d32f2f;
    --neta-error-light: #ef5350;
    --neta-success: #388e3c;
    --neta-success-light: #66bb6a;
}

/* =============================
   1. CONTRAST FIXES
   ============================= */

/* FIXED: Hero section subtitle contrast — was 82% white on dark, now improved */
.neta-hero__subtitle {
    color: rgba(255, 255, 255, 0.92);  /* Improved from 0.82 */
}

/* FIXED: Hero keywords contrast */
.neta-hero__keywords li {
    color: #e8f0f8;  /* Improved from #d6e4f7 */
    border-color: rgba(255, 255, 255, 0.25);  /* Improved from 0.18 */
}

/* FIXED: Dark section paragraph text contrast */
.neta-section--dark p,
.neta-section--dark li,
.neta-section--dark figcaption {
    color: #c0c8d9;  /* Improved from 0.78 opacity white, now has 5.5:1 ratio */
}

/* FIXED: Dark section lead text */
.neta-section--dark .neta-section__lead--light {
    color: #c0c8d9;  /* Improved from rgba(255,255,255,0.78) */
}

/* FIXED: Dark section muted text everywhere */
.neta-section--dark .neta-muted,
.neta-section--dark *[class*="muted"] {
    color: #a8b5c8;
}

/* FIXED: Page header lead contrast */
.neta-page-header__lead {
    color: rgba(255, 255, 255, 0.92);  /* Improved from 0.82 */
}

/* FIXED: Footer text contrast */
.neta-footer .footer-widget-two__quick-links-list li a {
    color: #c5d2e3;  /* Improved */
}

.neta-footer .footer-widget-two__get-in-touch-list li {
    color: #c5d2e3;  /* Improved from #b6c5d9 */
}

.neta-footer__about {
    color: #b8c2d5;  /* Improved from #9bb0c8 */
}

.neta-footer .site-footer-two__copyright-text {
    color: #9db0c5;  /* Improved from #8a9db4 */
}

/* FIXED: Breadcrumb contrast on dark background */
.neta-breadcrumb {
    color: rgba(255, 255, 255, 0.85);  /* Improved from 0.70 */
}

.neta-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);  /* Improved from 0.70 */
}

/* FIXED: Dark tile paragraph contrast */
.neta-tile--dark p {
    color: rgba(255, 255, 255, 0.88);  /* Improved from 0.75 */
}

/* FIXED: CTA button text contrast */
.neta-cta__inner h2 {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
}

/* =============================
   2. FORM ACCESSIBILITY
   ============================= */

.neta-form input[type="text"],
.neta-form input[type="email"],
.neta-form input[type="tel"],
.neta-form input[type="number"],
.neta-form input[type="date"],
.neta-form input[type="time"],
.neta-form select,
.neta-form textarea {
    border: 1.5px solid var(--neta-line);
    font-size: 16px;  /* Prevent zoom on mobile */
}

.neta-form input:focus,
.neta-form select:focus,
.neta-form textarea:focus {
    border-color: var(--neta-accent);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.15);
}

.neta-form input[aria-invalid="true"],
.neta-form textarea[aria-invalid="true"],
.neta-form select[aria-invalid="true"] {
    border-color: var(--neta-error);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

/* Form label improvements */
.neta-form label {
    font-size: 14px;
    font-weight: 600;
    color: var(--neta-ink);
    margin-bottom: 8px;
    display: block;
}

.neta-form label[aria-required="true"]::after,
.neta-form label.required::after {
    content: " *";
    color: var(--neta-error);
    font-weight: 700;
}

/* Error message styling */
.neta-form .error-message,
.neta-form [role="alert"],
.neta-form [aria-live="polite"] {
    display: block;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 6px;
    background-color: rgba(211, 47, 47, 0.08);
    border-left: 3px solid var(--neta-error);
    color: #c41c00;
    font-size: 13px;
    font-weight: 500;
}

.neta-form .success-message {
    background-color: rgba(56, 142, 60, 0.08);
    border-left-color: var(--neta-success);
    color: #1b5e20;
}

/* =============================
   3. BUTTON & CTA IMPROVEMENTS
   ============================= */

.thm-btn {
    border: none;
    cursor: pointer;
    font-size: 14px;
    min-height: 44px;  /* Mobile tap target */
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.thm-btn:disabled,
.thm-btn[aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.thm-btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Loading state */
.thm-btn[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================
   4. TYPOGRAPHY IMPROVEMENTS
   ============================= */

/* Better line heights for readability */
body {
    line-height: 1.6;
}

.neta-section p,
.neta-service-card p,
.neta-tile p,
.neta-article p {
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

/* Fluid typography for responsive design */
.neta-hero__title {
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.1;
}

.section-title__title {
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.15;
}

.neta-page-header h1 {
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.2;
}

/* =============================
   5. SPACING & LAYOUT IMPROVEMENTS
   ============================= */

/* Better card spacing */
.neta-service-card {
    padding: 32px 24px;
}

.neta-step {
    padding: 28px 24px;
}

.neta-form .form-group {
    margin-bottom: 20px;
}

/* Better mobile spacing */
@media (max-width: 768px) {
    .neta-section {
        padding: 60px 0;
    }
    
    .neta-hero {
        padding: 80px 0 60px;
    }
    
    .neta-cta {
        padding: 60px 0;
    }
    
    .neta-page-header {
        padding: 60px 0 40px;
    }
    
    .neta-service-card,
    .neta-tile,
    .neta-step,
    .neta-industry,
    .neta-project,
    .neta-article,
    .neta-form,
    .neta-office {
        padding: 24px 20px;
        margin-bottom: 28px;
    }
}

/* =============================
   6. INTERACTIVE STATES
   ============================= */

/* Improved focus indicators */
:focus-visible {
    outline: 2px solid var(--neta-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.neta-header .main-menu__list > li > a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--neta-accent), 0 0 0 3px rgba(31, 111, 235, 0.25);
}

/* Card hover states */
.neta-service-card:hover,
.neta-step:hover,
.neta-industry:hover,
.neta-project:hover,
.neta-article:hover {
    box-shadow: 0 16px 32px rgba(11, 37, 64, 0.12);
}

/* Link focus indication */
a:focus-visible {
    outline: 2px solid var(--neta-accent);
    outline-offset: 2px;
}

/* =============================
   7. RESPONSIVE IMPROVEMENTS
   ============================= */

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .neta-contact-grid {
        grid-template-columns: 1fr;
    }
    
    .neta-feature {
        gap: 32px;
    }
    
    .neta-hero__visual {
        max-width: 45%;
        right: 18px;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .neta-hero__keywords {
        gap: 8px;
        margin-bottom: 24px;
    }
    
    .neta-hero__btns {
        flex-direction: column;
        gap: 12px;
    }
    
    .neta-hero__btns .thm-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }
    
    .neta-breadcrumb {
        font-size: 12px;
    }
    
    .neta-form .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .neta-trust__items {
        flex-direction: column;
        gap: 12px;
    }
    
    .neta-values {
        grid-template-columns: 1fr;
    }
}

/* =============================
   8. DARK MODE SUPPORT
   ============================= */

/* Disabled: OS-level auto dark mode caused unreadable dark text on dark cards.
   The site now uses only explicit dark sections, controlled by .neta-section--dark. */

/* =============================
   9. MOTION 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;
    }
}

/* =============================
   10. PRINT STYLES
   ============================= */

@media print {
    .neta-header,
    .neta-footer,
    .neta-cta,
    .mobile-nav__wrapper,
    .scroll-to-top {
        display: none !important;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    .neta-section {
        page-break-inside: avoid;
        padding: 10px 0;
    }
}

/* =============================
   11. HIGH CONTRAST MODE
   ============================= */

@media (prefers-contrast: more) {
    :root {
        --neta-line: #666;
        --neta-muted: #333;
    }
    
    .neta-header {
        border-bottom: 2px solid var(--neta-line);
    }
    
    .neta-service-card,
    .neta-form,
    .neta-step {
        border: 2px solid var(--neta-line);
    }
    
    .thm-btn {
        border: 2px solid currentColor;
    }
}

/* =============================
   12. SEMANTIC HTML SUPPORT
   ============================= */

/* Support for article, section, nav semantic elements */
article { display: block; }
section { display: block; }
nav { display: block; }
main { display: block; }

/* Proper list styling for semantic lists */
nav ul,
nav ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li { display: block; }

/* =============================
   13. SKIP LINK
   ============================= */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--neta-primary);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* =============================
   14. BREADCRUMB NAVIGATION
   ============================= */

nav[aria-label="Breadcrumb"] {
    margin-bottom: 20px;
}

nav[aria-label="Breadcrumb"] ol {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav[aria-label="Breadcrumb"] li {
    display: flex;
    align-items: center;
}

nav[aria-label="Breadcrumb"] li::after {
    content: "/";
    margin-left: 10px;
    opacity: 0.6;
}

nav[aria-label="Breadcrumb"] li:last-child::after {
    content: "";
    margin-left: 0;
}

nav[aria-label="Breadcrumb"] a {
    color: inherit;
    text-decoration: none;
}

nav[aria-label="Breadcrumb"] a:hover {
    text-decoration: underline;
}

nav[aria-label="Breadcrumb"] [aria-current="page"] {
    font-weight: 600;
}


/* =============================
   12. FINAL DARK-BACKGROUND CONTRAST LOCK
   Ensures readable text on all intentionally dark sections.
   ============================= */
.neta-section--dark .section-title__title,
.neta-section--dark h1,
.neta-section--dark h2,
.neta-section--dark h3,
.neta-section--dark h4,
.neta-section--dark h5,
.neta-section--dark h6,
.neta-cta h1,
.neta-cta h2,
.neta-page-header h1,
.neta-footer .footer-widget-two__title,
.neta-footer .site-footer-two__social-title,
.neta-footer .footer-widget-two__get-in-touch-list li .text strong {
    color: #ffffff;
}

.neta-section--dark p,
.neta-section--dark li,
.neta-section--dark .neta-section__lead,
.neta-section--dark .neta-section__lead--light,
.neta-tile--dark p,
.neta-page-header__lead,
.neta-breadcrumb,
.neta-breadcrumb a,
.neta-footer .footer-widget-two__quick-links-list li a,
.neta-footer .footer-widget-two__get-in-touch-list li,
.neta-footer .footer-widget-two__get-in-touch-list li .text a,
.neta-footer__about,
.neta-footer .site-footer-two__copyright-text {
    color: #c8d4e5;
}

.neta-section--dark .neta-service-card,
.neta-section--dark .neta-tile--dark {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.16);
}

.neta-section--dark .neta-service-card h3,
.neta-section--dark .neta-service-card h3 a,
.neta-section--dark .neta-tile--dark h4 {
    color: #ffffff;
}

.neta-section--dark .neta-service-card p,
.neta-section--dark .neta-tile--dark p {
    color: #d4deec;
}

/* =============================
   13. CONTACT PAGE POLISH
   Fixes light-surface contact cards and form layout.
   ============================= */

.neta-contact-map {
    background:
        radial-gradient(circle at top left, rgba(56, 182, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #06121f 0%, #0b2540 100%);
    padding: clamp(20px, 3vw, 28px);
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.neta-contact-map img {
    width: 100%;
    display: block;
}

.neta-contact-grid {
    gap: 24px;
    margin-bottom: 12px;
}

.neta-office {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 45px rgba(11, 37, 64, 0.08);
}

.neta-contact-list {
    margin: 18px 0 0;
}

.neta-contact-list li {
    align-items: flex-start;
    gap: 14px;
}

.neta-contact-list li + li {
    margin-top: 14px;
}

.neta-contact-list li .icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(31, 111, 235, 0.14);
    background: #f2f7ff;
    color: var(--neta-accent);
}

.neta-contact-list li .icon::before {
    display: none;
}

.neta-contact-list li .text {
    padding-top: 2px;
}

.neta-contact-list li .text p,
.neta-contact-list li .text p a {
    color: var(--neta-ink);
    font-size: 15px;
    line-height: 1.6;
}

.neta-contact-list li .text p a:hover {
    color: var(--neta-accent);
}

.neta-form {
    box-shadow: 0 24px 60px rgba(11, 37, 64, 0.08);
}

.neta-form__intro {
    height: 100%;
    padding-right: 18px;
}

.neta-form__note {
    margin-top: 26px;
    padding: 20px 22px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f5f9ff 0%, #edf4ff 100%);
    border: 1px solid rgba(31, 111, 235, 0.12);
}

.neta-form__note p {
    margin: 12px 0 0;
    color: var(--neta-muted);
}

.neta-form .contact-form-validated {
    background: #fff;
    border-radius: 14px;
}

.main-menu .mobile-nav__toggler {
    background: transparent;
    border: 0;
    padding: 0;
}

.neta-form select {
    min-height: 52px;
    line-height: 1.4;
    border-radius: 10px;
}

.neta-form .nice-select {
    float: none;
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 12px 42px 12px 14px;
    border: 1.5px solid var(--neta-line);
    color: var(--neta-ink);
    border-radius: 10px;
}

.neta-form .nice-select::after {
    right: 18px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--neta-accent);
    border-right: 2px solid var(--neta-accent);
}

.neta-form .nice-select .current {
    color: var(--neta-ink);
    font-size: 16px;
}

.neta-form .nice-select .list {
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--neta-line);
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(11, 37, 64, 0.12);
}

.neta-form .nice-select .option {
    min-height: 42px;
    line-height: 42px;
    font-size: 15px;
}

@media (max-width: 991px) {
    .neta-form__intro {
        padding-right: 0;
        margin-bottom: 28px;
    }
}

@media (max-width: 767px) {
    .neta-office,
    .neta-form {
        padding: 24px 20px;
    }

    .neta-contact-list li .text p,
    .neta-contact-list li .text p a {
        font-size: 14px;
    }
}

/* =============================
   14. ABOUT PAGE POLISH
   ============================= */

.neta-about-intro .section-title {
    margin-bottom: 28px;
    max-width: 520px;
}

.neta-about-intro .neta-section__lead,
.neta-about-governance .neta-section__lead {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.neta-about-intro__grid {
    row-gap: 24px;
}

.neta-about-intro .section-title__title {
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.04;
    letter-spacing: -1px;
    max-width: 12ch;
}

.neta-about-intro .neta-tile {
    padding: 24px 22px;
    box-shadow: 0 16px 36px rgba(11, 37, 64, 0.06);
}

.neta-about-map {
    background:
        radial-gradient(circle at top left, rgba(56, 182, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #06121f 0%, #0b2540 100%);
    padding: clamp(20px, 3vw, 28px);
}

.neta-about-pillars,
.neta-about-governance {
    row-gap: 24px;
}

.neta-about-pillars .neta-pillar-card,
.neta-about-governance .neta-pillar-card {
    height: 100%;
}

.neta-about-governance .neta-pillar-card {
    padding: 34px 32px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 24px 60px rgba(11, 37, 64, 0.08);
}

.neta-about-pillars .section-title__title,
.neta-about-governance .section-title__title {
    margin-bottom: 18px;
}

.neta-values--stacked {
    grid-template-columns: 1fr;
    margin-top: 10px;
    gap: 14px;
}

.neta-values--stacked li {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--neta-line);
    box-shadow: none;
    padding: 18px 20px 18px 54px;
    font-size: 16px;
    line-height: 1.45;
}

.neta-values--stacked li::before {
    left: 20px;
    color: var(--neta-accent);
    font-size: 18px;
}

@media (max-width: 991px) {
    .neta-about-intro .section-title,
    .neta-about-governance .section-title {
        text-align: left;
    }

    .neta-about-intro .section-title__title {
        max-width: none;
    }
}