/* Извлечено из navigation.html — 20260806-090201 */

      /* ===== PAGE-SPECIFIC: Navigation/Services ===== */

      .page-hero {
        background: linear-gradient(135deg, var(--coral-dark) 0%, var(--grey-900) 60%, var(--grey-800) 100%);
        padding: calc(72px + var(--space-12)) var(--space-6) var(--space-8);
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .page-hero::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        top: -200px;
        right: -100px;
        pointer-events: none;
      }

      .page-hero__title {
        font-family: var(--font-display);
        font-size: var(--text-3xl);
        font-weight: 700;
        color: #fff;
        line-height: 1.1;
        margin-bottom: var(--space-4);
        letter-spacing: -0.02em;
      }

      .page-hero__subtitle {
        font-size: var(--text-lg);
        color: rgba(255,255,255,0.75);
        max-width: 560px;
        margin: 0 auto;
        line-height: 1.5;
      }

      /* Category sections */
      .categories {
        max-width: 1100px;
        margin: 0 auto;
        padding: var(--space-12) var(--space-6) var(--space-16);
      }

      .category {
        margin-bottom: var(--space-12);
      }

      .category__header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-6);
      }

      .category__icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        flex-shrink: 0;
      }

      .category--individual .category__icon { background: rgba(99, 102, 241, 0.1); }
      .category--apparatus .category__icon { background: rgba(236, 72, 53, 0.1); }
      .category--group .category__icon { background: rgba(16, 185, 129, 0.1); }

      .category__title {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--grey-900);
        letter-spacing: -0.01em;
      }

      .category__line {
        flex: 1;
        height: 1px;
        background: var(--grey-200);
        margin-left: var(--space-4);
      }

      /* Cards grid */
      .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
        gap: var(--space-4);
      }

      .service-card {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-5);
        background: #fff;
        border: 1px solid var(--grey-200);
        border-radius: var(--radius-lg);
        text-decoration: none;
        color: inherit;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
      }

      .service-card:hover {
        border-color: var(--coral);
        box-shadow: 0 8px 24px rgba(236, 72, 53, 0.08);
        transform: translateY(-2px);
      }

      .service-card__icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        background: var(--grey-100);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
        transition: background 0.25s ease;
      }

      .service-card:hover .service-card__icon {
        background: rgba(236, 72, 53, 0.08);
      }

      .service-card__body {
        flex: 1;
        min-width: 0;
      }

      .service-card__title {
        font-family: var(--font-display);
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--grey-900);
        margin-bottom: 2px;
        line-height: 1.3;
      }

      .service-card__desc {
        font-size: var(--text-sm);
        color: var(--grey-500);
        line-height: 1.4;
      }

      .service-card__arrow {
        color: var(--grey-400);
        transition: all 0.25s ease;
        flex-shrink: 0;
      }

      .service-card:hover .service-card__arrow {
        color: var(--coral);
        transform: translateX(3px);
      }

      /* Highlight card */
      .service-card--highlight {
        border-color: rgba(236, 72, 53, 0.2);
        background: linear-gradient(135deg, #fff 80%, rgba(236, 72, 53, 0.03) 100%);
      }

      /* Back link */
      .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--grey-500);
        text-decoration: none;
        font-size: var(--text-sm);
        margin-bottom: var(--space-6);
        transition: color 0.2s;
      }
      .back-link:hover { color: var(--coral); }

      /* Responsive */

      /* Footer overrides */
      .footer__grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr 1fr;
        gap: var(--space-10);
        align-items: start;
      }

      .footer__nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }

      .footer__contacts {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }

      

      

      .footer__social {
        display: flex;
        gap: var(--space-3);
        margin-top: var(--space-4);
      }

      @media (max-width: 640px) {
        .footer__grid {
          grid-template-columns: 1fr;
          gap: var(--space-6);
        }
      }

      @media (max-width: 640px) {
        .page-hero { padding-top: calc(60px + var(--space-8)); padding-bottom: var(--space-6); }
        .page-hero__title { font-size: var(--text-2xl); }
        .categories { padding: var(--space-6) var(--space-4) var(--space-12); }
        .category__title { font-size: var(--text-lg); }
        .cards-grid { grid-template-columns: 1fr; gap: var(--space-3); }
        .service-card { padding: var(--space-4); }
      }

      
      

      

      

      

      

      /* ===== ANIMATIONS & EFFECTS ===== */

      /* Hero particles */
      .page-hero {
        position: relative;
      }

      .page-hero__particles {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }

      .particle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        animation: particleFloat linear infinite;
      }

      @keyframes particleFloat {
        0% { transform: translateY(0) scale(1); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateY(-400px) scale(0.5); opacity: 0; }
      }

      /* Hero text typing glow */
      .page-hero__title {
        animation: heroGlow 3s ease-in-out infinite alternate;
      }

      @keyframes heroGlow {
        0% { text-shadow: 0 0 20px rgba(236,72,53,0); }
        100% { text-shadow: 0 0 40px rgba(236,72,53,0.3); }
      }

      /* Staggered card entrance */
      .service-card {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.25s ease,
                    box-shadow 0.25s ease;
      }

      .service-card.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Card hover — lift + glow + icon spin */
      .service-card:hover {
        border-color: var(--coral);
        box-shadow: 0 12px 32px rgba(236, 72, 53, 0.12);
        transform: translateY(-4px) !important;
      }

      .service-card:hover .service-card__icon {
        background: rgba(236, 72, 53, 0.1);
        transform: scale(1.1) rotate(5deg);
      }

      .service-card__icon {
        transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      /* Card hover arrow bounce */
      .service-card:hover .service-card__arrow {
        color: var(--coral);
        animation: arrowBounce 0.6s ease infinite;
      }

      @keyframes arrowBounce {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(6px); }
      }

      /* Category header slide-in */
      .category__header {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .category__header.visible {
        opacity: 1;
        transform: translateX(0);
      }

      /* Category line grows */
      .category__line {
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
      }

      .category__header.visible .category__line {
        transform: scaleX(1);
      }

      /* Category icon pulse */
      .category__icon {
        animation: iconPulse 2s ease-in-out infinite;
      }

      @keyframes iconPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.08); }
      }

      /* Hover ripple effect on cards */
      .service-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-lg);
        background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(236,72,53,0.06) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

      .service-card:hover::before {
        opacity: 1;
      }

      /* Page hero subtitle fade up */
      .page-hero__subtitle {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.8s ease 0.3s forwards;
      }

      .page-hero__title {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.8s ease 0.1s forwards, heroGlow 3s ease-in-out 1s infinite alternate;
      }

      @keyframes fadeUp {
        to { opacity: 1; transform: translateY(0); }
      }

      /* Floating shapes in hero */
      .hero-shape {
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
        pointer-events: none;
      }

      .hero-shape--1 {
        width: 300px; height: 300px;
        top: -100px; right: -50px;
        animation: shapeFloat 8s ease-in-out infinite;
      }

      .hero-shape--2 {
        width: 200px; height: 200px;
        bottom: -80px; left: -40px;
        animation: shapeFloat 6s ease-in-out infinite reverse;
      }

      .hero-shape--3 {
        width: 120px; height: 120px;
        top: 30%; left: 60%;
        animation: shapeFloat 10s ease-in-out infinite 2s;
      }

      @keyframes shapeFloat {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(20px, -20px) rotate(5deg); }
        66% { transform: translate(-15px, 15px) rotate(-3deg); }
      }

      /* Smooth scroll indicator */
      .scroll-indicator {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        animation: scrollBounce 2s ease-in-out infinite;
        color: rgba(255,255,255,0.5);
        font-size: 1.5rem;
      }

      @keyframes scrollBounce {
        0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
        50% { transform: translateX(-50%) translateY(10px); opacity: 1; }
      }

      /* Counter animation for category */
      .cards-count {
        font-size: var(--text-sm);
        color: var(--grey-400);
        margin-left: var(--space-2);
        font-weight: 500;
      }

      /* Footer links hover underline effect */
      .footer__nav a,
      .footer__contacts a {
        position: relative;
      }

      .footer__nav a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--coral);
        transition: width 0.3s ease;
      }

      .footer__nav a:hover::after {
        width: 100%;
      }

      /* Back link hover */
      .back-link:hover i {
        animation: arrowLeft 0.4s ease;
      }

      @keyframes arrowLeft {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(-5px); }
      }

      /* Prefers reduced motion */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .service-card { opacity: 1; transform: none; }
        .category__header { opacity: 1; transform: none; }
        .category__line { transform: scaleX(1); }
      }


      /* Social buttons — white rounded squares */
      .footer__social-icons {
        display: flex !important;
        gap: 12px !important;
        margin-top: 16px !important;
      }

      .soc-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.15) !important;
        color: rgba(255,255,255,0.9) !important;
        text-decoration: none !important;
        transition: all 0.25s ease !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      .soc-btn::before,
      .soc-btn::after {
        display: none !important;
        content: none !important;
      }

      .soc-btn svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        max-width: none !important;
        flex-shrink: 0 !important;
      }

      .soc-btn:hover {
        background: rgba(255,255,255,0.25) !important;
        transform: translateY(-2px) !important;
      }