/* ==========================================================================
   NeoCard Theme Styles (Overview for Buyers)
   - Primary customization happens via CSS variables in :root (colors, shadows, spacing).
   - Component blocks are grouped by section (navigation, modals, portfolio, etc).
   - A small optional dark-scheme override exists below inside @media (prefers-color-scheme: dark).
     You can ignore or remove it if you don't need dark appearance.
   - Prefer editing variables instead of hard-coded values to keep the design consistent.
   - Avoid changing layout-critical measurements unless you know the impact.
   ========================================================================== */
/* ==========================================================================
   Variables
   ========================================================================== */
   :root {
    --ico-color: #4a5260;
    --line-color: #dfe2e7;
    --bg-color: #eef0f3;
    --text-color: #2a2d33;
    --shadow-dark: #d5d8de;
    --shadow-light: #ffffff;
    --gradient-light: #f7f8fa;
    --gradient-dark: #e4e6eb;
    --modal-bg: #f4f5f7;
    --scrollbar-color: #d5d8de;
    --spacing: 20px;
    --border-radius: 5px;
    --circle-color: #252525; /* For timeline circles in resume */
    /* Spacing scale for consistent vertical rhythm */
    --space-xxs: 2px;
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 32px;
    /* Motion timings */
    --modal-open-duration: 420ms;
    --modal-close-duration: 260ms;
    --portfolio-open-duration: 520ms;
    --portfolio-close-duration: 300ms;
    /* Portfolio info panel metrics (keeps hover within card) */
    --portfolio-info-header: 48px; /* visible header height when collapsed */
    /* Nav alignment */
    --nav-panel-right: 24px; /* must match .nav-panel right */
    --nav-panel-height: 260px; /* must match .nav-panel height */
    /* Tooltip metrics */
    --tip-line: 44px;   /* length of the horizontal line to the left */
    --tip-pad-x: 8px;   /* label horizontal padding */
    --tip-pad-y: 4px;   /* label vertical padding */
    --tip-radius: 6px;  /* label border radius */
    --tip-fs: 11px;     /* label font size */
    --tip-pointer: 10px; /* width of the right arrow pointer */
    /* Gap between modal and right screen edge on desktop */
    --modal-right-gap: 54px;
  }


/* Inform the UA we support both schemes (affects built-in form controls) */
html { color-scheme: light; }

/* Performance: skip rendering heavy sections until visible */
.modal-body {
  content-visibility: auto;
  contain-intrinsic-size: 800px 1000px;
}
#modal-portfolio .modal-body {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/* Reduce paint area for dense cards */
.portfolio-item,
.portfolio-grid {
  contain: paint;
}


/* Tooltip with animated line (from center-left edge) */
.nav-panel-button,
.center-button { position: relative; }

/* Line */
.nav-panel-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%);
  height: 1px;
  width: 0;
  background: rgba(0,0,0,0.55);
  transition: width 220ms ease, opacity 200ms ease;
  opacity: 0;
}

/* Label */
.nav-panel-button::after {
  content: attr(aria-label);
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  right: calc(100% + var(--tip-line) - 1px);
  background: rgba(0,0,0,0.88);
  color: #fff;
  padding: var(--tip-pad-y) calc(var(--tip-pad-x) + var(--tip-pointer)) var(--tip-pad-y) var(--tip-pad-x);
  border-radius: var(--tip-radius);
  font-size: var(--tip-fs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  transform-origin: right center;
  z-index: 120;
  -webkit-clip-path: polygon(0% 0%, calc(100% - var(--tip-pointer)) 0%, 100% 50%, calc(100% - var(--tip-pointer)) 100%, 0% 100%, 0% 0%);
          clip-path: polygon(0% 0%, calc(100% - var(--tip-pointer)) 0%, 100% 50%, calc(100% - var(--tip-pointer)) 100%, 0% 100%, 0% 0%);
}

.nav-panel-button:hover::before,
.nav-panel-button:focus::before {
  width: var(--tip-line);
  opacity: 1;
}

.nav-panel-button:hover::after,
.nav-panel-button:focus::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 60ms;
}

/* No tooltip on the Продвижение button — clue-text serves as its label */
.nav-panel-button[data-modal="modal-resume"]::before,
.nav-panel-button[data-modal="modal-resume"]::after { content: none !important; }

/* Продвижение button: hidden until line arrives, then springs in */
.nav-panel-button[data-modal="modal-resume"] {
    opacity: 0;
    transform: scale(0.3);
    animation: navBtnIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 0.47s forwards;
}
.nav-panel-button[data-modal="modal-resume"].nav-btn-ready {
    animation: none;
    opacity: 1;
    transform: scale(1);
}
/* allow the larger button to overflow the nav panel */
.nav-panel { overflow: visible; }

@keyframes navBtnIn {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}

/* Disable hover/focus tooltips on touch-only devices */
@media (hover: none), (pointer: coarse) {
  .nav-panel-button::before,
  .nav-panel-button::after {
    content: none !important;
  }
}

/* ==========================================================================
   Global Styles (Desktop by default)
   ========================================================================== */
body {
    background: var(--bg-color);
    margin: 0;
    height: 100vh;
    overflow-y: auto;
    font-family: 'Titillium Web', Arial, sans-serif;
}

h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--text-color);
}

h2 {
    font-size: 28px;
    color: var(--text-color);
    margin: 0 0 20px;
}

/* Standardize heading font stack */
h1, h2, h3 { font-family: 'Titillium Web', Arial, sans-serif; }

/* Accessible focus-visible outlines for interactive elements */
:focus { outline: none; }
/* never show focus ring on center-button — it gets focus programmatically on return */
.center-button:focus, .center-button:focus-visible { outline: none; box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light); }
.nav-panel-button:focus-visible,
.social-button:focus-visible,
.ai-assistant-button:focus-visible,
.contact-button:focus-visible,
.portfolio-filter-btn:focus-visible,
.portfolio-prev-project:focus-visible,
.portfolio-next-project:focus-visible,
.portfolio-close-btn:focus-visible,
.close-button:focus-visible,
.download-btn:focus-visible,
.project-tech-tag:focus-visible,
.project-details-link:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Subtle focus for cards inside grid when keyboard focused */
.portfolio-item:focus-visible {
  outline: 2px solid rgba(10,132,255,0.7);
  outline-offset: 2px;
  border-radius: var(--border-radius);
}

/* ==========================================================================
   Components
   ========================================================================== */
/* Navigation panel */
.nav-panel {
    width: 40px;
    height: 260px;
    background: var(--bg-color);
    border-radius: 32px;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    position: fixed;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    z-index: 15;
}

.nav-panel-button {
    width: 40px;
    height: 40px;
    font-size: 14px;
    border: none;
    border-radius: 50%;
    color: var(--ico-color);
    background: linear-gradient(145deg, var(--gradient-light), var(--gradient-dark));
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: box-shadow 120ms ease, background 120ms ease, transform 120ms ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-panel-button i { font-size: 14px; }
.nav-panel-button:active {
    box-shadow: none;
    background: linear-gradient(145deg, var(--gradient-light), var(--gradient-dark));
    transition-duration: 0ms;
}
.nav-panel-button.active {
    box-shadow: none;
    background: linear-gradient(145deg, var(--gradient-light), var(--gradient-dark));
    transition-duration: 0ms;
}

/* Apply hover style only on real hover-capable devices (prevents sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .nav-panel-button:hover { box-shadow: none; }
}

/* Central portfolio button */
.center-wave-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 0;
    /* dot reaches top at 0.06+0.14+0.32=0.52s → button pops in */
    animation: fadeInCenter 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* after intro animation ends JS adds this class — keeps button visible via CSS (no inline styles) */
.center-wave-container.center-ready {
    animation: none;
    opacity: 1;
}

.center-button {
    width: 110px;
    height: 110px;
    font-size: 24px;
    border: none;
    border-radius: 50%;
    color: var(--ico-color);
    background: linear-gradient(145deg, var(--gradient-light), var(--gradient-dark));
    box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Allow tooltip pseudo-elements to extend outside button */
    overflow: visible;
    z-index: 100;
    transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

.center-button i { font-size: 18px; }
.center-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transform: translateY(2px);
}
.center-logo-mark {
    width: 34px;
    height: auto;
    display: block;
    pointer-events: none;
    filter:
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.92))
        drop-shadow(1px 1px 2px rgba(140, 152, 168, 0.32));
}
.center-logo-word {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--ico-color);
    text-shadow:
        -1px -1px 1px rgba(255, 255, 255, 0.9),
         1px  1px 2px rgba(140, 152, 168, 0.32);
}
.center-button:hover .center-logo-mark {
    filter:
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95))
        drop-shadow(1px 2px 2px rgba(140, 152, 168, 0.28));
}
.center-button:hover { box-shadow: none; }
.center-button:active {
    box-shadow: inset 10px 10px 20px var(--shadow-dark), inset -10px -10px 20px var(--shadow-light);
    background: var(--gradient-dark);
}

/* Wave animation */
.wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid var(--bg-color);
    transform: translate(-50%, -50%) scale(0);
    animation: wave-animation 2.5s infinite ease-out;
    z-index: -1;
    box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.1), inset -10px -10px 20px rgba(255, 255, 255, 0.7),
                10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
}

.wave:nth-child(3) { animation-delay: 0.5s; }
.wave:nth-child(4) { animation-delay: 1s; }
.wave:nth-child(5) { animation-delay: 1.5s; }

/* Social buttons */
.social-links {
    position: fixed;
    display: flex;
    gap: 20px;
    z-index: 101;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    flex-direction: column;
}

.social-button {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-decoration: none;
    color: var(--ico-color);
    background: linear-gradient(145deg, var(--gradient-light), var(--gradient-dark));
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease, color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-button i { font-size: 12px; }
.social-button:hover { box-shadow: none; }
.social-button:active {
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    background: var(--gradient-dark);
}

/* Back to home — top left, visible after leaving the homepage */
.home-back-btn {
    position: fixed;
    top: 8px;
    left: 18px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-14px);
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.main-exited .home-back-btn {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.home-back-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ico-color);
    background: var(--bg-color);
    box-shadow:
        7px 7px 16px rgba(150, 158, 170, 0.38),
        -6px -6px 14px rgba(255, 255, 255, 0.88);
    transition: box-shadow 180ms ease, transform 180ms ease, color 180ms ease;
}

.home-back-icon i {
    font-size: 10px;
    margin-left: -1px;
}

.home-back-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #a4b0bc;
    white-space: nowrap;
    transition: color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .home-back-btn:hover .home-back-icon {
        transform: translateX(-2px);
        box-shadow:
            4px 4px 10px rgba(150, 158, 170, 0.28),
            -4px -4px 10px rgba(255, 255, 255, 0.9);
    }
    .home-back-btn:hover .home-back-label { color: #5a6678; }
}

.home-back-btn:active .home-back-icon {
    transform: translateX(-1px) scale(0.96);
    box-shadow:
        inset 4px 4px 8px rgba(150, 158, 170, 0.28),
        inset -4px -4px 8px rgba(255, 255, 255, 0.82);
}

@media (prefers-reduced-motion: reduce) {
    .home-back-btn { transition: opacity 0.2s ease; transform: none; }
}

/* Modal close button */
.close-button {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--line-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0; /* Hide font size of container to center icon-span */
    font-weight: bold;
    color: #555;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Vector cross: same in all browsers, centered */
.close-button .x-icon,
.portfolio-close-btn .x-icon {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    line-height: 0;
    font-size: 0; /* Hide text symbol × */
    color: inherit;
}
.close-button .x-icon::before,
.close-button .x-icon::after,
.portfolio-close-btn .x-icon::before,
.portfolio-close-btn .x-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transform-origin: center;
}
.close-button .x-icon::before,
.portfolio-close-btn .x-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-button .x-icon::after,
.portfolio-close-btn .x-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

.close-button::after {
    content: "ESC";
    position: absolute;
    top: 50%;
    left: calc(100% + 25px);
    transform: translateY(-50%);
    font-size: 9px;
    color: #555;
}

.close-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 20px;
    height: 1px;
    background: var(--line-color);
    transform: translateY(-50%);
}

.close-button:hover {
    background: var(--modal-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    border-color: #ddd;
}

.close-button:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border-color: #ccc;
}

/* AI Assistant button */
.ai-assistant-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--ico-color);
    background: linear-gradient(145deg, var(--gradient-light), var(--gradient-dark));
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(255, 255, 255, 0.6);
    transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease, color 0.2s ease;
    border: none;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-assistant-button:active {
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

/* Contact buttons */
.contact-button {
    background-color: transparent;
    border: 2px solid #333;
    color: #333;
    width: 80px;
    height: 80px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.contact-button:hover {
    background-color: #333;
    color: #fff;
}

/* ==========================================================================
   Sections
   ========================================================================== */
/* Main section */
.home-container {
    position: fixed;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.home-card { padding: 5px 20px; }

/* ── Label "ВЕБ-СТУДИЯ" ─────────────────────────────────── */
.home-label {
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: clamp(7px, 0.54vw, 9px);
    font-weight: 300;
    letter-spacing: 0.48em;
    text-transform: uppercase;
    color: #b8c2cc;
    opacity: 0;
    animation: homeItemIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}

.home-label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: #c8d2da;
    flex-shrink: 0;
}

/* ── Основной заголовок ─────────────────────────────────── */
.home-name {
    margin: 0 0 20px;
    padding: 0;
    line-height: 0.92;
    font-size: inherit;
    font-weight: 400;
}

/* «РАЗРАБОТКА» — Raleway 200, воздушное, трекинг */
.home-name-thin {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: clamp(30px, 3.4vw, 52px);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #a0aab5;
    text-shadow:
        -1px -1px 4px rgba(255,255,255,0.88),
         1px  1px 6px rgba(155,165,178,0.32);
    opacity: 0;
    animation: homeItemIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}

/* «сайтов» — Raleway 300, чуть темнее и крупнее */
.home-name-word {
    display: block;
    margin-top: 0.04em;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: clamp(36px, 4.3vw, 66px);
    letter-spacing: 0.09em;
    color: #3c4452;
    text-shadow:
        -2px -2px 6px rgba(255,255,255,0.94),
         2px  2px 9px rgba(140,152,168,0.40);
    opacity: 0;
    animation: homeItemIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
}

/* ── Подзаголовок ───────────────────────────────────────── */
.home-sub {
    margin: 20px 0 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-size: clamp(9px, 0.78vw, 11.5px);
    font-weight: 300;
    color: #b8c2cc;
    letter-spacing: 0.08em;
    opacity: 0;
    animation: homeItemIn 0.8s cubic-bezier(0.22,1,0.36,1) 0.65s forwards;
}

/* ── Анимация появления элементов заголовка ─────────────── */
@keyframes homeItemIn {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

#Typewriter_skills {
    margin-top: 18px;
    padding: 0 20px;
    font-size: clamp(11px, 1vw, 14px);
    color: #7a8088;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    letter-spacing: 0.01em;
}

/* Resume tooltip */
/* Container anchored at nav-panel left edge, width = line length */
.clue-resume {
    position: fixed;
    top: 50%;
    right: 64px;                /* right edge = nav-panel left edge */
    width: 10vw;                /* matches line max-width */
    transform: translateY(-50%);
    z-index: 5;
}

/* Tooltip — sits just to the LEFT of the container (line start) */
.clue-text {
    position: absolute;
    right: 100%;                /* flush to container left edge */
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-family: 'Titillium Web', sans-serif;
    color: #fff;
    background: rgba(0, 0, 0, 0.88);
    padding: 3px calc(8px + var(--tip-pointer)) 3px 8px;
    border-radius: var(--tip-radius);
    white-space: nowrap;
    /* appears first: grows left→right from arrow tip */
    opacity: 0;
    transform: translateY(-50%) scaleY(0.05);
    transform-origin: center center;
    animation: clueTextIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
    -webkit-clip-path: polygon(0% 0%, calc(100% - var(--tip-pointer)) 0%, 100% 50%, calc(100% - var(--tip-pointer)) 100%, 0% 100%);
            clip-path: polygon(0% 0%, calc(100% - var(--tip-pointer)) 0%, 100% 50%, calc(100% - var(--tip-pointer)) 100%, 0% 100%);
}

@keyframes clueTextIn {
    /* phase 1: appear as thin horizontal line */
    0%   { opacity: 0; transform: translateY(-50%) scaleY(0.05); }
    30%  { opacity: 1; transform: translateY(-50%) scaleY(0.05); }
    /* phase 2: expand vertically to full tooltip */
    100% { opacity: 1; transform: translateY(-50%) scaleY(1);    }
}

/* Line — fills container, draws LEFT→RIGHT (from tooltip toward nav-panel) */
.clue-line {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    background-color: var(--line-color);
    transform: scaleX(0);
    transform-origin: left center;
    animation: grow-line 0.25s linear 0.22s forwards;
}

/* Modal window */
.modal {
    position: fixed;
    top: 2%;
    right: 0;
    height: 96%;
    width: calc(96% - 70px);
    background-color: var(--modal-bg);
    border-radius: 24px;
    z-index: 10;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    transition: transform var(--modal-open-duration) cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 8px 2px rgba(0, 0, 0, 0.2);
    display: none;
    will-change: transform;
    backface-visibility: hidden;
    contain: layout paint;
}

.modal.show {
    transform: translate3d(calc(-1 * var(--modal-right-gap)), 0, 0);
    opacity: 1;
    display: block;
}

.modal.closing { transition-duration: var(--modal-close-duration), 180ms; }
.modal.hide { transform: translate3d(100%, 0, 0); opacity: 0; }

/* Scroll page-change: softer close so the frame does not snap */
.modal.story-swap.closing,
.modal.story-swap.hide {
    transition: transform 0.64s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.52s ease,
                filter 0.52s ease;
    transform: translate3d(22%, 0, 0) scale(0.98);
    opacity: 0;
    filter: blur(10px);
}

/* Мобильный Firefox/браузеры с touch: во время анимации убираем тяжёлую тень,
   чтобы избавиться от микрофризов при выезде модалки */
@media (hover: none), (pointer: coarse) {
  .modal.animating { box-shadow: none; }
}

/* Портретная ориентация: полностью отключаем тени у модалок для лучшей производительности */
@media (orientation: portrait) {
  .modal { box-shadow: none; }
}

/* Во время анимации подскажем браузеру композитинг по transform */
.modal.animating { will-change: transform; }

.modal-content {
    padding: 40px 40px 40px 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-body {
    padding-left: 80px;
    padding-right: 30px;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
    /* Улучшение поведения скролла в мобильных браузерах */
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* Изоляция перерисовок содержимого модалки */
    contain: content;
}

.modal-body::-webkit-scrollbar { width: 2px; }
.modal-body::-webkit-scrollbar-button { display: none; height: 0; }
.modal-body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 99px;
}
.modal-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 22px 0;
}

/* About Me */
/* removed duplicate .about-me-wrapper: unified definition is provided later with .resume-wrapper */

.about-me-image-column {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.profile-photo-ring {
    width: min(100%, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 14px;
    background: var(--bg-color);
    box-shadow: inset 10px 10px 20px var(--shadow-dark), inset -10px -10px 20px var(--shadow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-photo-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.about-me-text-skills-column { flex: 1; max-width: 50%; }

.about-me-text-skills-column h2 {
    margin: 0 0 10px;
    font-size: 28px;
    color: var(--text-color);
}

.about-me-text-skills-column .subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 15px;
    font-weight: 500;
}

.about-me-text-skills-column p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 20px;
}

/* Skills (common for About Me) */
.skills-container {
    width: 100%;
}

.skills-container h3 {
    /* unified in typography section below */
}

.skills-grid {
    display: grid;
    row-gap: 8px;
    column-gap: 10px;
}

.skill-item {
    position: relative;
    padding: 5px 0;
}

.skill-item p {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1;
    color: #555;
}

.skill-percentage {
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 14px;
    color: #666;
    line-height: 1;
}

.skill-bar {
    height: 8px;
    background: var(--line-color);
    border-radius: 4px;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    background: #404852;
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

/* ==========================================================================
   О НАС — i-WOW студия (modal-profile)
   ========================================================================== */

#modal-profile .ac-wrap {
    padding: 4px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

#modal-profile .ac-wrap h2,
#modal-profile .ac-wrap h4,
#modal-profile .ac-wrap p,
#modal-profile .ac-wrap ul,
#modal-profile .ac-wrap li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: inherit;
}

/* ── Шапка ──────────────────────────────────────────────── */
#modal-profile .ac-header {
    padding: 8px 40px 0;
}

#modal-profile .ac-eyebrow,
#modal-profile .ac-section-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #a8b4c0;
    margin: 0 0 14px;
}

#modal-profile .ac-title {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 200 !important;
    font-size: clamp(36px, 4.2vw, 58px) !important;
    color: #1a2030 !important;
    margin: 0 0 12px !important;
    line-height: 1.02 !important;
    letter-spacing: 0.01em;
}

#modal-profile .ac-title-accent {
    font-weight: 300;
    color: #5a6578;
}

#modal-profile .ac-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13px, 1.15vw, 16px);
    font-weight: 300;
    color: #7a8898;
    margin: 0 !important;
    max-width: 520px;
    line-height: 1.55;
}

/* ── Цитата: печать прямо на фоне ───────────────────────── */
#modal-profile .ac-quote {
    margin: 0 40px;
    padding: 4px 0 2px;
    min-height: 72px;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

#modal-profile .ac-quote-text {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important;
    font-size: clamp(15px, 1.45vw, 20px) !important;
    color: #2c3444 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    min-height: 1.5em;
}

#modal-profile .ac-quote-caret {
    display: inline-block;
    width: 1.5px;
    height: 0.9em;
    margin-left: 3px;
    background: #4a5468;
    vertical-align: -2px;
    animation: acCaret 1s steps(1) infinite;
}

@keyframes acCaret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#modal-profile .ac-quote-author {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a8b2be;
    margin-top: 10px;
    min-height: 1.2em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#modal-profile .ac-quote-author.is-on {
    opacity: 1;
    transform: translateY(0);
}

/* ── Статистика — цифры на фоне, без карточек ───────────── */
#modal-profile .ac-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 10px 40px 6px;
}

#modal-profile .ac-stat {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

#modal-profile .ac-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 22%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(160, 172, 186, 0.38) 20%,
        rgba(160, 172, 186, 0.38) 80%,
        transparent
    );
}

#modal-profile .ac-stat-value {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: clamp(34px, 4.1vw, 54px);
    color: #2a3140;
    line-height: 1;
    display: block;
    letter-spacing: -0.04em;
    text-shadow:
        -2px -2px 6px rgba(255, 255, 255, 0.95),
         2px  3px 10px rgba(140, 152, 168, 0.38);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#modal-profile .ac-stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: #a4b0bc;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-align: center;
    line-height: 1.5;
}

#modal-profile .ac-stat-label::before {
    content: '';
    display: block;
    width: 16px;
    height: 1px;
    margin: 0 auto 8px;
    background: linear-gradient(90deg, transparent, #c5ced8, transparent);
}

#modal-profile .ac-stat:hover .ac-stat-value {
    transform: translateY(-3px);
}

/* ── Фото команды ───────────────────────────────────────── */
#modal-profile .ac-photo-wrap {
    margin: 0 40px;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow:
        10px 10px 24px rgba(150, 160, 175, 0.36),
        -5px -5px 16px rgba(255, 255, 255, 0.80);
}

#modal-profile .ac-team-photo {
    width: 100%;
    aspect-ratio: 16 / 8.2;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#modal-profile .ac-photo-wrap:hover .ac-team-photo {
    transform: scale(1.03);
}

/* ── О компании — два абзаца ────────────────────────────── */
#modal-profile .ac-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 4px 40px 6px;
}

#modal-profile .ac-about p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #5c6a78 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* ── Принципы ───────────────────────────────────────────── */
#modal-profile .ac-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0 40px;
}

#modal-profile .ac-value-card {
    --ac-accent: #5b8dee;
    background: #ffffff;
    border-radius: 24px;
    padding: 26px 24px 22px;
    min-height: 248px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(140, 150, 165, 0.14);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease;
}

#modal-profile .ac-val--result { --ac-accent: #5b8dee; }
#modal-profile .ac-val--speed  { --ac-accent: #e09a2b; }
#modal-profile .ac-val--trust  { --ac-accent: #2db37c; }
#modal-profile .ac-val--grow   { --ac-accent: #7c5cbf; }

#modal-profile .ac-value-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: var(--ac-accent);
    transform: scaleY(0.22);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.85;
}

#modal-profile .ac-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(120, 132, 148, 0.20);
}

#modal-profile .ac-value-card:hover::before {
    transform: scaleY(1);
}

#modal-profile .ac-value-num {
    position: absolute;
    right: 10px;
    bottom: -18px;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 118px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--ac-accent);
    opacity: 0.08;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.45s ease;
}

#modal-profile .ac-value-card:hover .ac-value-num {
    opacity: 0.16;
    transform: translateY(-6px);
}

#modal-profile .ac-value-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f6f8;
    color: var(--ac-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 16px;
    position: relative;
}

#modal-profile .ac-value-title {
    font-family: 'Raleway', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #1a2030 !important;
    margin: 0 0 8px !important;
    letter-spacing: 0.01em;
    position: relative;
}

#modal-profile .ac-value-text {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 300 !important;
    color: #6a7686 !important;
    line-height: 1.65 !important;
    margin: 0 0 16px !important;
    max-width: 92%;
    position: relative;
}

#modal-profile .ac-value-list {
    list-style: none;
    margin: auto 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(180, 192, 210, 0.22);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
}

#modal-profile .ac-value-list li {
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: #5a6678;
    margin: 0 !important;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f3f5f8;
    line-height: 1.3;
}

/* ── Анимации ───────────────────────────────────────────── */
@keyframes acFadeUp {
    from { opacity: 0; transform: translateY(22px); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

@keyframes acFadeScale {
    from { opacity: 0; transform: scale(0.96); filter: blur(2px); }
    to   { opacity: 1; transform: scale(1);    filter: blur(0);   }
}

#modal-profile.show .ac-eyebrow  { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
#modal-profile.show .ac-title    { animation: acFadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.16s both; }
#modal-profile.show .ac-tagline  { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.24s both; }
#modal-profile.show .ac-quote    { animation: acFadeScale 0.7s cubic-bezier(0.22,1,0.36,1) 0.30s both; }

#modal-profile.show .ac-stat:nth-child(1) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.38s both; }
#modal-profile.show .ac-stat:nth-child(2) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.46s both; }
#modal-profile.show .ac-stat:nth-child(3) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.54s both; }
#modal-profile.show .ac-stat:nth-child(4) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.62s both; }

#modal-profile.show .ac-photo-wrap { animation: acFadeScale 0.75s cubic-bezier(0.22,1,0.36,1) 0.68s both; }
#modal-profile.show .ac-about      { animation: acFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.78s both; }

#modal-profile.show .ac-value-card:nth-child(1) { animation: acFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.86s both; }
#modal-profile.show .ac-value-card:nth-child(2) { animation: acFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.96s both; }
#modal-profile.show .ac-value-card:nth-child(3) { animation: acFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 1.06s both; }
#modal-profile.show .ac-value-card:nth-child(4) { animation: acFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 1.16s both; }

@media (max-width: 768px) {
    #modal-profile .ac-header,
    #modal-profile .ac-stats,
    #modal-profile .ac-about,
    #modal-profile .ac-values { padding-left: 18px; padding-right: 18px; }

    #modal-profile .ac-quote,
    #modal-profile .ac-photo-wrap { margin-left: 18px; margin-right: 18px; }

    #modal-profile .ac-stats { grid-template-columns: 1fr 1fr; gap: 8px 0; }

    #modal-profile .ac-stat:nth-child(2)::after,
    #modal-profile .ac-stat:nth-child(4)::after { display: none; }

    #modal-profile .ac-stat:nth-child(-n+2)::before {
        content: '';
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(160, 172, 186, 0.32), transparent);
    }
    #modal-profile .ac-about,
    #modal-profile .ac-values { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    #modal-profile .ac-title { font-size: 32px !important; }
    #modal-profile .ac-quote { padding: 2px 0; min-height: 68px; }
}

/* ==========================================================================
   ПРОДВИЖЕНИЕ — modal-resume redesign
   ========================================================================== */

.pr-wrap {
    padding: 8px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Шапка ──────────────────────────────────────────────── */
.pr-header {
    padding: 0 40px 28px;
    border-bottom: 1px solid rgba(180,192,208,0.22);
    margin-bottom: 24px;
}

.pr-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #b8c4d0;
    margin: 0 0 14px;
}

.pr-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: clamp(28px, 3.4vw, 46px);
    color: #1e2430;
    margin: 0 0 10px;
    line-height: 1.05;
    letter-spacing: 0.02em;
}

.pr-title-accent {
    font-weight: 300;
    color: #4a5468;
}

.pr-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: #8a98a8;
    margin: 0;
}

/* ── Метрики ─────────────────────────────────────────────── */
.pr-stats {
    display: flex;
    padding: 0 40px 24px;
    border-bottom: 1px solid rgba(180,192,208,0.22);
    margin-bottom: 28px;
}

.pr-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-right: 1px solid rgba(180,192,208,0.2);
}
.pr-stat:last-child { border-right: none; }

.pr-stat-value {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: clamp(22px, 2.8vw, 36px);
    color: #1e2430;
    line-height: 1;
    display: block;
}
.pr-stat-value sup { font-size: 0.45em; vertical-align: super; font-weight: 300; }

.pr-stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: #9aabb8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.3;
}

/* ── Вводный текст ───────────────────────────────────────── */
.pr-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 40px 28px;
    border-bottom: 1px solid rgba(180,192,208,0.22);
    margin-bottom: 28px;
}

.pr-intro p {
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: #5c6878;
    line-height: 1.75;
    margin: 0;
}

/* ── Разделитель секций ──────────────────────────────────── */
.pr-section-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #b8c4d0;
    padding: 0 40px 18px;
}

/* ── Карточки услуг ──────────────────────────────────────── */
.pr-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 0 40px 32px;
    border-bottom: 1px solid rgba(180,192,208,0.22);
    margin-bottom: 28px;
}

.pr-service-card {
    --pr-accent: #5c6878;
    background: var(--bg-color);
    border-radius: 22px;
    padding: 22px 20px 18px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        7px 7px 16px rgba(163, 169, 178, 0.28),
        -6px -6px 14px rgba(255, 255, 255, 0.88);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.pr-card--seo      { --pr-accent: #3d74d4; }
.pr-card--ppc      { --pr-accent: #b8862b; }
.pr-card--smm      { --pr-accent: #b4537a; }
.pr-card--content  { --pr-accent: #2a9a72; }
.pr-card--analytics{ --pr-accent: #6754a3; }
.pr-card--local    { --pr-accent: #c45c45; }

.pr-service-index {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #1e2430;
    opacity: 0.06;
    pointer-events: none;
}

.pr-service-card > *:not(.pr-service-index) {
    position: relative;
    z-index: 1;
}

.pr-service-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}

.pr-service-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

@media (hover: hover) and (pointer: fine) {
    .pr-service-card:hover {
        transform: translateY(-3px);
        box-shadow:
            9px 10px 20px rgba(163, 169, 178, 0.32),
            -7px -7px 16px rgba(255, 255, 255, 0.94);
    }
}

.pr-service-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--bg-color);
    box-shadow:
        5px 5px 10px rgba(163, 169, 178, 0.38),
        -4px -4px 9px rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--pr-accent);
    flex-shrink: 0;
}

.pr-service-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pr-accent);
}

.pr-service-term {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #8a94a0;
    letter-spacing: 0.02em;
}

.pr-service-title {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #1e2430;
    margin: 0;
    letter-spacing: -0.02em;
}

.pr-service-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #6a7380;
    line-height: 1.65;
    margin: 0;
}

.pr-service-list {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.pr-service-list li {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6e7c8c;
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}

.pr-service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 6px;
    height: 1px;
    background: #c5cbd3;
}

.pr-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.pr-kpi {
    padding: 9px 11px;
    border-radius: 12px;
    background: #e8eaee;
    box-shadow:
        inset 2px 3px 6px rgba(155, 162, 172, 0.18),
        inset -2px -2px 5px rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pr-kpi strong {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #1e2430;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pr-kpi span {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #8a96a2;
    line-height: 1.25;
}

.pr-service-footer {
    margin-top: 2px;
    padding-top: 11px;
    border-top: 1px solid rgba(180, 192, 210, 0.22);
}

.pr-result-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6a7380;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    box-shadow: none;
}

.pr-result-tag i {
    font-size: 9px;
    color: var(--pr-accent);
}

@media (prefers-reduced-motion: reduce) {
    .pr-service-card {
        transition: none !important;
    }
    .pr-service-card:hover {
        transform: none !important;
    }
}

/* ── Процесс ─────────────────────────────────────────────── */
.pr-process {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0 40px;
}

.pr-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pr-step-num {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: clamp(28px, 3.2vw, 42px);
    color: #d0d8e4;
    line-height: 1;
    display: block;
}

.pr-step-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1e2430;
    margin: 0;
}

.pr-step-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 300;
    color: #7a8898;
    line-height: 1.65;
    margin: 0;
}

.pr-step-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(180,192,210,0.25);
    margin: 4px 28px;
    flex-shrink: 0;
}

/* ── Анимации ────────────────────────────────────────────── */
#modal-resume.show .pr-eyebrow  { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
#modal-resume.show .pr-title    { animation: acFadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.17s both; }
#modal-resume.show .pr-tagline  { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.26s both; }

#modal-resume.show .pr-stat:nth-child(1) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.32s both; }
#modal-resume.show .pr-stat:nth-child(2) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.40s both; }
#modal-resume.show .pr-stat:nth-child(3) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.48s both; }
#modal-resume.show .pr-stat:nth-child(4) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.56s both; }

#modal-resume.show .pr-intro p:nth-child(1)    { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.62s both; }
#modal-resume.show .pr-intro p:nth-child(2)    { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.70s both; }

#modal-resume.show .pr-service-card:nth-child(1) { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.74s backwards; }
#modal-resume.show .pr-service-card:nth-child(2) { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.82s backwards; }
#modal-resume.show .pr-service-card:nth-child(3) { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.90s backwards; }
#modal-resume.show .pr-service-card:nth-child(4) { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.98s backwards; }
#modal-resume.show .pr-service-card:nth-child(5) { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 1.06s backwards; }
#modal-resume.show .pr-service-card:nth-child(6) { animation: acFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 1.14s backwards; }

#modal-resume.show .pr-step:nth-child(1) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 1.18s both; }
#modal-resume.show .pr-step:nth-child(3) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 1.26s both; }
#modal-resume.show .pr-step:nth-child(5) { animation: acFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 1.34s both; }

/* ── Адаптив ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pr-header, .pr-stats, .pr-intro,
    .pr-section-label, .pr-services,
    .pr-process { padding-left: 20px; padding-right: 20px; }

    .pr-services  { grid-template-columns: 1fr 1fr; }
    .pr-intro     { grid-template-columns: 1fr; gap: 16px; }
    .pr-process   { flex-direction: column; gap: 20px; }
    .pr-step-divider { width: 100%; height: 1px; margin: 0; align-self: auto; }
}

@media (max-width: 480px) {
    .pr-services { grid-template-columns: 1fr; }
    .pr-stats    { flex-wrap: wrap; }
    .pr-stat     { flex: 0 0 50%; border-right: none; padding-bottom: 12px; }
    .pr-stat:nth-child(odd) { border-right: 1px solid rgba(180,192,208,0.2); }
}

/* Resume */
.resume-wrapper {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px 0;
}

.column-left { flex: 2; min-width: 0; }
.column-right { flex: 1; max-width: 400px; min-width: 0; }

.column-left h2,
.column-right h2 {
    margin: 0 0 10px;
    font-size: 28px;
    color: var(--text-color);
}

.column-left p,
.column-right p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 20px;
}

/* ==================================================================
   Unified headings & spacing for Profile and Resume modals
   - Keeps typography consistent between sections
   - Improves vertical rhythm (different gaps: title→text vs text→title)
   ================================================================== */
#modal-profile .modal-body h2,
#modal-resume .modal-body h2,
.about-me-text-skills-column h2,
.column-left h2,
.column-right h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--text-color);
  margin: 0 0 var(--space-sm);
  line-height: 1.25;
}

#modal-profile .modal-body h3,
#modal-resume .modal-body h3,
.skills-container h3,
.skills-group h3 {
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--text-color);
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}
.skills-group {
  margin: 40px 0 10px 0;
}





#modal-profile .modal-body p,
#modal-resume .modal-body p,
.about-me-text-skills-column p,
.column-left p,
.column-right p {
  margin: 0 0 var(--space-sm);
}

/* Larger top margin when a heading follows text; tighter when text follows heading */
#modal-profile .modal-body p + h2,
#modal-resume .modal-body p + h2,
#modal-profile .modal-body p + h3,
#modal-resume .modal-body p + h3 { margin-top: var(--space-md); }

#modal-profile .modal-body h2 + p,
#modal-resume .modal-body h2 + p,
#modal-profile .modal-body h3 + p,
#modal-resume .modal-body h3 + p { margin-top: var(--space-xs); }

/* Consistent stacking inside main columns */
.about-me-text-skills-column > * + *,
.column-left > * + *,
.column-right > * + * { margin-top: var(--space-sm); }

/* Scoped spacing variables for modals (safer than global change) */
#modal-profile .modal-body,
#modal-resume .modal-body {
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 24px;
}

/* Shared wrapper metrics for layout parity */
.about-me-wrapper,
.resume-wrapper {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 0;
}

/* Mobile spacing tweaks for wrappers and modal paddings */
@media (max-width: 768px) {
  .about-me-wrapper,
  .resume-wrapper { flex-direction: column; gap: 20px; padding: 24px 20px 0; }
  .modal-content { padding: 24px 20px; }
  .modal-body { padding-left: 40px; padding-right: 16px; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .wave,
  .icon-wrapper i,
  .line-containe_down::after { animation: none !important; }
  .home-label,
  .home-name-thin,
  .home-name-word,
  .home-sub {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
  .modal,
  .modal.show,
  .modal.hide,
  .portfolio-modal-content,
  .portfolio-modal.active .portfolio-modal-content,
  .portfolio-modal.closing .portfolio-modal-content,
  .ps-track,
  .ps-thumb { transition-duration: 0ms !important; }
  html { scroll-behavior: auto; }
}

/* Skills in Resume (identical to About Me) */
.skills-section {
    width: 100%;
}

/* unified in typography section below */

/* Scroll behavior improvements (no визуальных изменений) */
.portfolio-modal-content,
.portfolio-modal-details-wrapper {
  overscroll-behavior: contain;
  /* Изоляция перерисовок правой панели */
  contain: content;
}

/* На портретной ориентации избегаем вложенной прокрутки внутри превью,
   прокручивается контейнер выше (.ps-main / модальное содержимое) */
@media (orientation: portrait) {
  .ps-image-container { overflow: visible; }
}

.skills-section .skill-item {
    position: relative;
    padding: 5px 0;
}

.skills-section .skill-item p {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1;
    color: #555;
}

.skills-section .skill-percentage {
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 14px;
    color: #666;
    line-height: 1;
}

.skills-section .skill-bar {
    height: 8px;
    background: var(--line-color);
    border-radius: 4px;
    overflow: hidden;
}

.skills-section .skill-progress {
    height: 100%;
    background: #404852;
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

/* Timeline */
.timeline {
    position: relative;
    margin-left: 200px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 5px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--circle-color);
    background: var(--modal-bg);
    border-radius: 50%;
}

.timeline-date {
    position: absolute;
    left: -230px;
    width: 200px;
    text-align: right;
    font-size: 14px;
    color: #666;
}

.timeline-date span {
    display: block;
    font-size: 11px;
    color: #666;
}

.timeline-content {
    padding-left: 20px;
}

.timeline-content h3 {
    margin-bottom: 5px;
    font-size: 18px;
    color: var(--text-color);
}


/* Download button */
.download-btn {
    display: inline-flex;
    align-items: center;
    margin: 30px 0 20px 0;

    padding: 10px 20px;
    background: transparent;
    border: 2px solid #404852;
    color: #404852;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, color 0.3s ease;
}

.download-btn i {
    margin-right: 8px;
}

.download-btn:hover {
    background: #404852;
    color: #fff;
}

/* Services */
.services-section {
    max-width: 1200px;
    margin: var(--space-lg) auto 0;
    padding: 0 40px;
}

.services-heading {
    font-size: clamp(18px, 1.8vw, 22px);
    color: var(--text-color);
    margin: 0 0 var(--space-xs);
    text-align: center;
    font-weight: 700;
}

.services-subheading {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin: 0 0 var(--space-md);
    line-height: 1.5;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Responsive services grid */
@media (max-width: 992px) {
  .services-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services-section { padding: 0 20px; }
  .services-container { grid-template-columns: 1fr; }
}

.service-item {
    text-align: left;
    background: var(--bg-color);
    border-radius: 20px;
    padding: 24px 22px 20px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: border-color 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #404852, #6b7280);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-item:hover {
    border-color: rgba(255, 255, 255, 0.75);
    background: #e4e4e4;
}

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

.service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.service-icon {
    width: 52px;
    height: 52px;
    background: var(--bg-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.service-item:hover .service-icon {
    background: #e4e4e4;
}

.service-icon i {
    font-size: 20px;
    color: var(--ico-color);
}

.service-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #404852;
    background: rgba(64, 72, 82, 0.08);
    border: 1px solid rgba(64, 72, 82, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
}

.service-item h4 {
    font-size: 17px;
    color: var(--text-color);
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.3;
}

.service-description {
    font-size: 13px;
    color: #666;
    margin: 0 0 14px;
    line-height: 1.6;
}

.service-features {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    flex: 1;
}

.service-features li {
    font-size: 12.5px;
    color: #555;
    line-height: 1.5;
    padding: 5px 0 5px 22px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.service-features li:last-child {
    border-bottom: none;
}

.service-features li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 10px;
    color: #404852;
    opacity: 0.7;
}

.service-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

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

.service-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.service-percentage {
    font-size: 13px;
    color: var(--text-color);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.service-progress-bar {
    height: 6px;
    background: var(--bg-color);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
}

.service-progress {
    height: 100%;
    background: linear-gradient(90deg, #404852, #5a6270);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-level {
    font-size: 11px;
    font-weight: 700;
    color: #404852;
    background: rgba(64, 72, 82, 0.1);
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Unify lists inside Profile/Resume modals (exclude service features) */
#modal-profile .modal-body ul:not(.service-features),
#modal-resume .modal-body ul {
  margin: 0 0 var(--space-sm);
  padding-left: 20px;
}
#modal-profile .modal-body li:not(.service-features li),
#modal-resume .modal-body li {
  margin: 0 0 var(--space-xs);
  line-height: 1.6;
}

/* Portfolio */
.portfolio-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
}


.pslider {
  display: block;
  width: 100%;
}

@media (min-width: 1200px) and (orientation: landscape) {
  .pslider {
    width: 94%;
  }
}



.ps-main {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.ps-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.ps-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
.ps-image-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ps-image-container::-webkit-scrollbar { width: 8px; }
.ps-image-container::-webkit-scrollbar-track { background: transparent; }
.ps-image-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 4px; }
.ps-image-container::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }

.ps-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top;
  display: block;
}
/* YouTube indicator on main slide (red rectangle) */
.ps-slide.youtube::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; border-radius: 10px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74a8 8 0 0 0-5.64-5.66C55.9 1 34 1 34 1S12.1 1 7.12 2.08a8 8 0 0 0-5.64 5.66A83 83 0 0 0 1 24a83 83 0 0 0 .48 16.26 8 8 0 0 0 5.64 5.66C12.1 47 34 47 34 47s21.9 0 26.88-1.08a8 8 0 0 0 5.64-5.66A83 83 0 0 0 67 24a83 83 0 0 0-.48-16.26Z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>') center/contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
/* Local video indicator on main slide (circle play) */
.ps-slide.video-local::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/45% no-repeat, rgba(0,0,0,0.55);
  pointer-events: none;
}
/* video and iframe in preview no longer used */

/* Allow swipe gestures to work over media inside the slider by delegating pointer events to the container.
   Fullscreen modal uses separate elements (.ps-modal-*) and remains interactive. */
/* removed selectors for video in preview */
.ps-image-container { touch-action: pan-y; }

.ps-thumbs {
  display: flex;
  margin-top: 12px;
  gap: 15px;
  padding-bottom: 10px;
  overflow-x: auto;
  
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  user-select: none;
  touch-action: pan-x;

  padding-top: 4px;
}
.ps-thumbs::-webkit-scrollbar { display: none; }
.ps-thumb {
  flex: 0 0 21%;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;

}
.ps-thumbs { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }

@media (max-width: 768px) {
  .ps-main { aspect-ratio: 16/9; }
  .ps-thumb { flex-basis: 28%; }
}
@media (max-width: 480px) {
  .ps-thumb { flex-basis: 26%; }
}
.ps-thumb:hover { opacity: 1; }
.ps-thumb.active { opacity: 1; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; pointer-events: none; }
/* YouTube icon on video preview (thumbnails) */
.ps-thumb.youtube::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 28px; border-radius: 6px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74a8 8 0 0 0-5.64-5.66C55.9 1 34 1 34 1S12.1 1 7.12 2.08a8 8 0 0 0-5.64 5.66A83 83 0 0 0 1 24a83 83 0 0 0 .48 16.26 8 8 0 0 0 5.64 5.66C12.1 47 34 47 34 47s21.9 0 26.88-1.08a8 8 0 0 0 5.64-5.66A83 83 0 0 0 67 24a83 83 0 0 0-.48-16.26Z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>') center/contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
/* Local video play icon on thumbnails (circle) */
.ps-thumb.video-local::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/55% no-repeat, rgba(0,0,0,0.55);
  pointer-events: none;
}
/* removed play indicator on video preview */

.ps-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 2000;
  justify-content: center; align-items: flex-start;
  overflow-y: auto; scrollbar-width: thin;
}
.ps-modal * { pointer-events: auto; }
.ps-modal.active { display: flex; }
.ps-modal-body { display: flex; justify-content: center; align-items: flex-start; width: 100%; padding: 20px; }
.ps-modal-body.center { align-items: center; padding: 0; min-height: 100%; }
.ps-modal-image {
  width: 90%; max-width: 1200px; height: auto; display: none;
}
/* YouTube player display in fullscreen modal */
.ps-modal-video-iframe {
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 16/9;
  border: none;
  display: none;
}
.ps-modal-video {
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  background: #000;
  display: none;
  object-fit: contain;
}
.ps-close {
  position: fixed; top: 20px; right: 20px; font-size: 30px; color: #fff;
  cursor: pointer; background: none; border: none; z-index: 1001; transition: transform 0.3s ease;
}
.ps-close:hover { transform: scale(1.2); }

.portfolio-container h1 {
    text-align: left;
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}

/* removed .portfolio-section-title (not used in markup) */

.portfolio-filters {
    margin-bottom: var(--spacing);
    display: flex;
    justify-content: center;
    width: 100%;
}

.portfolio-filter-btn {
    position: relative;
    font-size: 13px;
    margin: 5px;
    padding: 8px 15px;
    border: none;
    background: #fff;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s, color 0.3s;
}

.portfolio-filter-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 80%;
    height: 1px;
    background: #333;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.portfolio-filter-btn:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.portfolio-filter-btn.active {
    background: #333;
    color: #fff;
}







.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 18px; /* vertical spacing */
    column-gap: 30px; /* increased horizontal spacing */
    width: 100%;
    box-sizing: border-box;
}

/* Responsive portfolio grid columns */
@media (max-width: 992px) {
  .portfolio-item { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 600px) {
  .portfolio-item { flex: 0 0 100%; max-width: 100%; }
}

.portfolio-item {
    /* Keep exactly 3 per row: total horizontal gaps = 2 * 30px */
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden; /* keep hover content inside card to prevent jitter */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    transform: scale(1);
    box-sizing: border-box;
    margin-bottom: 40px;
    position: relative;
    z-index: 1; /* establish stacking so hover can overlay siblings */
    /* Improve rendering stability */
    contain: paint;
}

/* Invisible hover buffer to keep the hover state stable while the info panel moves */
/* No need for external hover buffer when content stays inside */


.portfolio-item img {
    width: 100%;
    height: 100%; /* fill the image-container height */
    object-fit: cover; /* avoid distortion while filling */
    object-position: center center; /* consistent crop like other cards */
    display: block;
    /* Smooth zoom like the demo */
    transition: transform 0.5s ease;
}


.portfolio-item .portfolio-title {
    padding: 10px;
    font-size: 15px;
    color: #333;
    margin: 0;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portfolio-item .portfolio-category {
    font-size: 12px;
    color: #666;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 12px;
    margin-left: 10px;
}

.portfolio-item .portfolio-desc {
    font-size: 14px;
    margin-top: 8px;
    color: #555;
    max-height: 0; /* hidden by default */
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    opacity: 0;
    will-change: max-height, opacity;
    pointer-events: none;
}

/* Short teaser shown in the grid on hover */
.portfolio-teaser {
  font-size: 13px;
  color: #666;
  margin-top: 6px;
  display: block; /* keep in DOM to allow smooth transitions */
  /* show full text when expanded; no clamping */
  overflow: visible;
  white-space: normal;
  max-height: 0; /* collapsed by default */
  opacity: 0;
  /* Hover-out: collapse immediately and faster */
  transition: max-height 180ms cubic-bezier(0.3, 0, 0.7, 1), opacity 160ms ease-out;
  will-change: max-height, opacity;
}

/* New wrappers to support hover effect (first variant) */
.image-container {
    width: 100%;
    aspect-ratio: 16 / 11; /* restore previous proportional height */
    overflow: hidden; /* clip zoomed image */
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: #000; /* subtle dark bg */
}

/* Media fallback block (HTML/CSS instead of placeholder image) */
.image-container,
.ps-image-container,
.ps-thumb,
.ps-modal-body {
  position: relative;
}
.media-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #555;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.03),
    rgba(0, 0, 0, 0.03) 8px,
    rgba(0, 0, 0, 0.06) 8px,
    rgba(0, 0, 0, 0.06) 16px
  );
  border: 1px dashed rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  z-index: 2;
}
.media-fallback-active .media-fallback { display: flex; }
.media-fallback-active img { display: none; }
.media-fallback-active video { display: none; }
.media-fallback-active.ps-thumb::after { display: none; }

/* Video thumbnails for mp4 previews */
.ps-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.ps-video-thumb--small {
  object-fit: cover;
}

/* Performance tweaks for touch/mobile (reduce heavy effects during scroll) */
@media (hover: none) and (pointer: coarse) {
  .service-item,
  .skill-item,
  .timeline-item,
  .portfolio-item,
  .modal-content,
  .portfolio-modal-content,
  .portfolio-info {
    box-shadow: none !important;
  }
  .portfolio-item:hover img { transform: none; }
  .portfolio-info,
  .portfolio-teaser,
  .portfolio-item img {
    transition: none !important;
  }
  .modal,
  .portfolio-modal-content {
    will-change: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave { animation: none !important; }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 4:3 kept across breakpoints for consistent proportions */

.portfolio-info {
    position: absolute;
    left: 0;
    bottom: 8px;

    width: 100%;

   background: rgba(255, 255, 255, 0.8);/* stronger solid background for readability */
    padding: 8px 15px; /* match demo spacing */
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    /* Unified transition like demo */
    transition: transform 0.4s ease;
    z-index: 10;
    will-change: transform;
    /* Keep hover target on the card while the panel moves (prevents jitter) */
    pointer-events: none;
    /* Start mostly hidden inside the card; only the header remains visible */
    transform: translateY(calc(100% - var(--portfolio-info-header)));
}

/* Hover Effects to match the sample */
.portfolio-item:hover img {
  transform: scale(1.5);
  /* Smooth zoom */
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.portfolio-item:hover { z-index: 100; }
.portfolio-item:hover .portfolio-info {
  /* Slide fully into view but stay inside the card */
  transform: translateY(0);
}
/* Smoothly reveal teaser to any length and allow overlay */
.portfolio-item:hover .portfolio-teaser {
  max-height: 999px;
  opacity: 1;
  /* Reveal timings similar to demo */
  transition: max-height 0.4s ease, opacity 0.3s ease 80ms;
}

/* Slim typography inside info bar */
.portfolio-info .portfolio-title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  padding: 0;
  color: #222;
}
.portfolio-info .portfolio-category {
  font-size: 11px;
  padding: 0 8px;
  border-radius: 10px;
  background: #e9ecf1;
  color: #505861;
}

/* Keep full description hidden in grid view for consistent hover behavior */
.portfolio-item:hover .portfolio-desc {
    max-height: 0;
    opacity: 0;
}

/* Only show teaser (not full desc) on hover in the grid */
/* display toggles removed in favor of height/opacity transitions for smoother open/close */

.portfolio-fade-out {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.portfolio-hidden { display: none; }

.portfolio-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.portfolio-modal-content {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Smooth GPU exit */
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
    transition: transform var(--portfolio-open-duration) cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    will-change: transform;
    backface-visibility: hidden;
}

.portfolio-modal.active .portfolio-modal-content { transform: translate3d(0, 0, 0); opacity: 1; }
.portfolio-modal.closing .portfolio-modal-content { transition-duration: var(--portfolio-close-duration), 180ms; }

.portfolio-modal-header {
    background: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}

/* Unified close button appearance for portfolio, like .close-button */
.portfolio-close-btn {
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--line-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0; /* like .close-button, so it doesn't affect baseline */
    color: #555;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, color 0.2s ease;
}
.portfolio-close-btn:hover {
    background: var(--modal-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    border-color: #ddd;
}
.portfolio-close-btn:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border-color: #ccc;
}
/* Disable ESC pseudo-elements characteristic of .close-button */
.portfolio-close-btn::after,
.portfolio-close-btn::before { content: none !important; }

.portfolio-nav-projects {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right: 10px;
}

.portfolio-category-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.portfolio-prev-project,
.portfolio-next-project {
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    border: none;
    border-radius: 50%;
    color: #666;
    background: #fff;
    transition: background 0.3s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-prev-project:hover,
.portfolio-next-project:hover {
    background: #f5f5f5;
}

/* removed duplicate .portfolio-close-btn block (kept earlier bordered style) */

.portfolio-modal-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.portfolio-modal-projects {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.portfolio-modal-project {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portfolio-modal-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    flex-grow: 1;
    border-radius: 0 !important;
}

.portfolio-modal-details-wrapper {
    overflow-y: auto;
    padding: 10px;
}

.portfolio-modal-details { text-align: left; }

/* Clarify image container behavior during animation */
.ps-image-container { contain: paint; }


.portfolio-modal-desc {
    font-size: 15px;
    line-height: 1.75;
    color: #23272f;
    margin-bottom: 18px;
    font-family: 'Titillium Web', Arial, sans-serif;
    letter-spacing: 0.01em;
    padding: 10px 24px 10px 24px;
}

.portfolio-modal-desc strong {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1.08em;
}

.portfolio-modal-desc em {
    color: #3498db;
    font-style: normal;
    font-weight: 500;
}

.portfolio-modal-desc ul {
    margin: 10px 0 10px 0;
    padding-left: 22px;
    list-style: none;
}

.portfolio-modal-desc ul li {
    position: relative;
    margin-bottom: 7px;
    padding-left: 18px;
    font-size: 16px;
    color: #2d3a4a;
    line-height: 1.6;
}

.portfolio-modal-desc ul li:last-child { margin-bottom: 0; }

.portfolio-modal-desc ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background: linear-gradient(135deg, #3498db 60%, #e0e0e0 100%);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(52,152,219,0.12);
}

.portfolio-modal-title {
    font-size: 30px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
    font-family: 'Titillium Web', Arial, sans-serif;
}

/* Removed old portfolio slider classes in favor of pslider */

/* Simplification for portrait orientation: gallery on top, description below */
@media (orientation: portrait) {
  .portfolio-modal-inner {
    display: block;
  }
  .portfolio-modal-gallery {
    height: auto;
    overflow: visible;
  }
  .portfolio-modal-details-wrapper {
    max-height: none;
    overflow: visible;
    padding: 12px;
  }
  /* Return 16:9 viewport with vertical scroll for tall images */
  .ps-main { aspect-ratio: 16/9; height: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .ps-main img { width: 100%; height: auto; display: block; object-position: top center; }
}

/* Portfolio line */
.line-containe_down {
    position: fixed;
    left: 50%;
    /* start just below the button bottom edge (button = 110px → 55px from center + 12px gap) */
    top: calc(50% + 67px);
    transform: translateX(-50%);
    z-index: 5;
    width: 1px;
    height: 130px;
    overflow: visible;
}

.line-containe_down .line { position: absolute; background: var(--line-color); }

/* draws UPWARD in sync with dot — delay matches dot's horizontal phase */
.vertical_down {
    width: 1px;
    height: 0;
    top: auto;
    bottom: 0;
    animation: drawVertical 0.32s linear 0.2s forwards;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 28%);
}

/* draws RIGHT-TO-LEFT in sync with dot — starts when dot starts */
.horizontal_down {
    width: 28px;
    height: 1px;
    top: 130px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right center;
    animation: drawHorizontal 0.14s linear 0.06s forwards;
}

/* tooltip pops in instantly at t=0 */
.line-down-text {
    position: absolute;
    font-size: 9px;
    top: 130px;
    left: 29px;
    transform: translateY(-50%) scaleY(0.05);
    transform-origin: center center;
    opacity: 0;
    white-space: nowrap;
    color: #fff;
    background: rgba(0, 0, 0, 0.88);
    padding: 3px 8px 3px calc(8px + var(--tip-pointer));
    border-radius: var(--tip-radius);
    pointer-events: auto;
    cursor: pointer;
    animation: showText 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
    font-family: 'Titillium Web', sans-serif;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-clip-path: polygon(var(--tip-pointer) 0%, 100% 0%, 100% 100%, var(--tip-pointer) 100%, 0% 50%);
            clip-path: polygon(var(--tip-pointer) 0%, 100% 0%, 100% 100%, var(--tip-pointer) 100%, 0% 50%);
}

.line-down-text:hover { background: rgba(0, 0, 0, 1); transform: translateY(-50%) scaleX(1) scale(1.06); }
.line-down-text:active { transform: translateY(-50%) scaleX(1) scale(0.96); }

/* Travelling dot: tooltip → left along horizontal → up vertical → button */
.line-containe_down::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-color);
    box-shadow: 0 0 6px 2px rgba(42, 45, 51, 0.3);
    opacity: 0;
    /* start: right end of horizontal line (x=28), centred: left=28-3=25, top=130.5-3=128 */
    left: 25px;
    top: 128px;
    animation: dotTravel 1.5s linear 0.06s infinite;
    pointer-events: none;
}

@keyframes dotTravel {
    /* appear at tooltip */
    0%   { left: 25px; top: 128px; opacity: 0;   transform: scale(0.5); }
    4%   { left: 24px; top: 128px; opacity: 1;   transform: scale(1);   }
    /* reach corner — horizontal done at 0.14s = 9% of 1.5s */
    9%   { left: -3px; top: 128px; opacity: 1;   transform: scale(1);   }
    /* corner turn up */
    12%  { left: -3px; top: 118px; opacity: 1;   transform: scale(1);   }
    /* reach top — vertical done at 0.14+0.32=0.46s = 31% of 1.5s */
    31%  { left: -3px; top: 4px;   opacity: 1;   transform: scale(0.8); }
    /* fade out */
    36%  { left: -3px; top: 0;     opacity: 0;   transform: scale(0.3); }
    /* invisible pause */
    100% { left: -3px; top: 0;     opacity: 0;   transform: scale(0.3); }
}

/* Central button icon */
.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-wrapper i {
    position: absolute;
    font-size: 18px;
}

/* AI Assistant container */
.ai-assistant-container {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 10px;
    left: 58%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.ai-assistant-text {
    font-size: 12px;
    color: #575656;
    font-family: 'Titillium Web', sans-serif;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes wave-animation {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

@keyframes grow-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes drawVertical   { from { height: 0; } to { height: 130px; } }
@keyframes drawHorizontal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes showText {
    /* phase 1: appear as thin horizontal line */
    0%   { opacity: 0; transform: translateY(-50%) scaleY(0.05); }
    30%  { opacity: 1; transform: translateY(-50%) scaleY(0.05); }
    /* phase 2: expand vertically to full tooltip */
    100% { opacity: 1; transform: translateY(-50%) scaleY(1);    }
}
/* button appears when dot reaches top: delay=0.1+0.28+0.65=1.03s */
@keyframes fadeInCenter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ==========================================================================
   Mobile devices (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px),
(min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
    .nav-panel {
        width: 40%;
        height: 50px;
        bottom: 20px;
        top: auto;
        right: 0;
        border-radius: 28px 0 0 28px;
        flex-direction: row;
        justify-content: space-around;
        padding: 0 10px;
        box-shadow: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light);
        transform: none;
    }

    .nav-panel-button {
        width: 40px;
        height: 40px;
        margin-left: 0;
    }

    .center-wave-container { top: 55%; z-index: 10; }

    .social-links {
        top: 12px;
        left: 10px;
        transform: none;
        flex-direction: row;
    }

    .social-button { width: 25px; height: 25px; }
    .social-button i { font-size: 12px; }

    .home-back-btn {
        top: 6px;
        left: 10px;
        gap: 6px;
    }
    .home-back-icon {
        width: 28px;
        height: 28px;
    }
    .home-back-icon i { font-size: 9px; }
    .home-back-label { font-size: 8px; letter-spacing: 0.16em; }
    body.main-exited .social-links {
        top: 12px;
        left: 96px;
        transform: none;
    }

    @media (max-width: 420px) {
        .home-back-label { display: none; }
        body.main-exited .social-links { left: 58px; }
    }

    .modal:not(.modal-ai) {
        top: auto;
        bottom: 0;
        left: 0;
        height: 94%;
        width: 100%;
        border-radius: 15px 15px 0 0;
        transform: translateY(100%);
        opacity: 0;
        display: none;
    }

    .modal:not(.modal-ai).show {
        transform: translateY(0);
        opacity: 1;
        display: block;
    }

    .modal:not(.modal-ai).hide {
        transform: translateY(100%);
        opacity: 0;
    }

    .modal-content {
        padding: 48px 12px; /* tighter spacing for portrait/mobile */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        padding-left: 12px;
        padding-right: 10px;
        max-height: calc(100% - 50px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-grow: 1;
    }

    .modal-body::-webkit-scrollbar { width: 2px; }
    .modal-body::-webkit-scrollbar-button { display: none; height: 0; }
    .modal-body::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color);
        border-radius: 99px;
    }
    .modal-body::-webkit-scrollbar-track {
        background: transparent;
        margin: 22px 0;
    }

    /* Tighter side paddings for Portfolio modal on smartphones/tablets */
    #modal-portfolio .modal-content {
        padding-left: 8px;
        padding-right: 8px;
    }
    #modal-portfolio .modal-body {
        padding-left: 6px;
        padding-right: 6px;
    }
    #modal-portfolio .portfolio-container {
        padding-left: 6px;
        padding-right: 6px;
    }
    #modal-portfolio .portfolio-grid {
        column-gap: 16px;
        row-gap: 14px;
    }

    .home-container { top: 28%; }
    .home-card { padding: 5px 10px; }
    .home-name { margin-bottom: 8px; line-height: 0.92; }
    /* Портрет: оба слова почти на всю ширину экрана */
    .home-name-thin {
        font-size: clamp(28px, 11.5vw, 54px);
        letter-spacing: 0.16em;
    }
    .home-name-word {
        font-size: clamp(42px, 21vw, 88px);
        letter-spacing: 0.04em;
    }
    .home-label { font-size: 7.5px; margin-bottom: 14px; }
    .home-sub { font-size: 9.5px; margin-top: 12px; }
    #Typewriter_skills { font-size: 13px; padding: 0 10px; margin-top: 12px; }

    .clue-resume { display: none; }

    .portfolio-item {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }

    /* Restore flex structure; simple stacking with no growth */
    .portfolio-modal-inner { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
    .portfolio-modal-projects { display: flex; height: auto; }
    .portfolio-modal-project { display: flex; flex-direction: column; height: auto; }
    .portfolio-modal-gallery { display: block; position: relative; z-index: 0; height: auto; min-height: unset; flex: 0 0 auto; flex-grow: 0; overflow: visible; margin-bottom: var(--space-md); }
    .portfolio-modal-details-wrapper { display: block; position: static; height: auto; overflow: visible; }

    /* Let portfolio detail content flow and scroll on portrait */
    .portfolio-modal-content { overflow-y: auto; padding-top: 0 !important; }
    .portfolio-modal-header { height: 40px; padding: 4px 8px; }
    .portfolio-modal-projects { height: auto; }
    .portfolio-modal-project { height: auto; }

    /* Remove extra vertical gaps around gallery */
    .pslider, .ps-main { margin: 0 !important; }
    .ps-thumbs { display: flex; margin-top: var(--space-xxs); padding-bottom: 8px; margin-bottom: 0; gap: 10px; }
    .portfolio-modal-details-wrapper { display: block; position: relative; z-index: 1; padding-top: 0; }

    .ai-assistant-container {
        left: 30px;
        bottom: 20px;
        top: auto;
        transform: none;
    }

    .about-me-wrapper,
    .resume-wrapper {
        flex-direction: column;
        padding: 20px 15px 0;
    }

    .about-me-image-column,
    .about-me-text-skills-column,
    .column-left,
    .column-right { max-width: 100%; }

    .profile-photo-ring {
        width: min(260px, 70vw);
        margin: 0 auto;
    }

    .about-me-text-skills-column h2,
    .column-left h2,
    .column-right h2 { font-size: 24px; }

    .about-me-text-skills-column .subtitle { font-size: 16px; }
    .about-me-text-skills-column p,
    .column-left p,
    .column-right p { font-size: 14px; }

    .skills-container h3,
    .skills-section h2,
    .skills-group h3 { font-size: 20px; }

    .skills-grid {
        row-gap: 5px;
    }

    .skill-item {
        padding: 3px 0;
    }

    .skill-item p {
        margin-bottom: 3px;
        font-size: 12px;
    }

    .skill-percentage {
        top: 8px;
        font-size: 12px;
    }

    .skill-bar { height: 6px; }

    .services-section {
        padding: 0 15px;
        margin: 20px auto 0;
    }

    .services-subheading {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .service-item {
        padding: 20px 18px 18px;
    }

    .service-icon { width: 46px; height: 46px; border-radius: 12px; }
    .service-icon i { font-size: 18px; }
    .service-item h4 { font-size: 16px; }
    .service-description { font-size: 12.5px; }
    .service-features li { font-size: 12px; }
    .service-percentage { font-size: 12px; }
    .service-progress-bar { height: 5px; }
    .service-level { font-size: 10px; padding: 4px 8px; }

    .line-containe_down { top: calc(55% + 67px); height: 110px; }
    .vertical_down { bottom: 0; top: auto; animation: drawVerticalMobile 0.32s linear 0.2s forwards; }
    .horizontal_down { top: 110px; width: 28px; transform: scaleX(0); transform-origin: right center; animation: drawHorizontal 0.14s linear 0.06s forwards; }
    .line-down-text { top: 110px; }

    .timeline {
        margin-left: 0;
    }

    .timeline::before {
        left: 10px;
    }

    .timeline-item::before {
        left: 4px;
    }

    .timeline-date {
        position: static;
        width: auto;
        text-align: left;
        margin-bottom: 10px;
        padding-left: 20px;
    }

    .timeline-content {
        padding-left: 40px;
    }


    .portfolio-filters {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
        overflow-x: visible;
        margin-bottom: 10px;
    }
    .portfolio-filter-btn {
        padding: 7px 10px;
        font-size: 13px;
        min-width: 80px;
        border-radius: 8px;
        margin: 2px 0;
    }
}

@media (max-width: 480px) {
    .portfolio-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Desktop improvements for portfolio
   ========================================================================== */
@media (min-width: 769px) {
    .portfolio-modal-inner {
        flex-direction: row;
        height: 100%;
    }

    .portfolio-modal-header {
        position: absolute;
        top: 10px;
        right: 10px;
        width: clamp(150px, 25%, 300px); 
        border-radius: 8px;
        border: 1px solid #d1d1d1;
        justify-content: space-between;
        z-index: 10;
    }

    .portfolio-modal-projects { flex-direction: row; }
    .portfolio-modal-project { flex-direction: row; }
    .portfolio-modal-gallery { width: 70%; height: 100vh; padding: 0 24px; box-sizing: border-box; }
    .portfolio-modal-details-wrapper { width: 26%; padding-top: 80px; height: 100vh; }

    .column-left {
        flex: 2;
        min-width: 0;
    }

    .column-right {
        flex: 1;
        max-width: 400px;
        min-width: 0;
    }
}



/* ==========================================================================
   Landscape orientation
   ========================================================================== */
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
    :root { --modal-right-gap: 31px; }

    .nav-panel {
        width: 28px !important;
        height: 182px !important;
        right: 10px !important;
        padding: 7px !important;
        top: 50% !important;
        bottom: auto !important;
        flex-direction: column !important;
        border-radius: 32px !important;
    }

    .nav-panel-button {
        width: 40px !important;
        height: 40px !important;
        margin-left: 0 !important;
    }

    .center-button {
        width: 110px !important;
        height: 110px !important;
        box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light) !important;
    }

    .center-button:active {
        box-shadow: inset 10px 10px 20px var(--shadow-dark), inset -10px -10px 20px var(--shadow-light) !important;
    }

    .center-button i { font-size: 18px !important; }
    .center-logo-mark { width: 34px; height: auto; }
    .center-logo-word { font-size: 13.5px; }

    .wave {
        width: 110px !important;
        height: 110px !important;
    }

    .line-containe_down { height: 110px !important; }
    .vertical_down {
        bottom: 0 !important; top: auto !important;
        animation: drawVerticalLandscape 0.32s linear 0.2s forwards !important;
    }
    .horizontal_down {
        top: 110px !important;
        width: 28px !important;
        transform: scaleX(0) !important;
        transform-origin: right center !important;
        animation: drawHorizontalLandscape 0.14s linear 0.06s forwards !important;
    }
    .line-down-text { top: 110px !important; }

    .social-links {
        left: 10px !important;
    }

    .social-button {
        width: 25px !important;
        height: 25px !important;
    }

    .social-button i {
        font-size: 12px !important;
    }

    .clue-resume {
        right: 38px !important;
    }

    .home-container {
        top: 50% !important;
        left: 5% !important;
        transform: translateY(-50%) !important;
    }

    .home-card { padding: 5px 10px; }
    .home-name { margin-bottom: 8px; line-height: 0.92; }
    .home-name-thin { font-size: clamp(22px, 5.0vw, 36px); letter-spacing: 0.14em; }
    .home-name-word { font-size: clamp(28px, 6.5vw, 48px); letter-spacing: 0.06em; }
    .home-label { font-size: 7px; margin-bottom: 12px; }
    .home-sub { font-size: 9px; margin-top: 10px; }
    #Typewriter_skills {
        font-size: 11.2px !important;
        margin-top: 10px;
    }

    .ai-assistant-container {
        left: 62% !important;
    }

    .modal:not(.modal-ai) {
        top: 2% !important;
        right: 0 !important;
        height: 96% !important;
        width: calc(100% - 70px) !important;
        border-radius: 16.8px !important;
        transform: translateX(100%) !important;
        opacity: 0 !important;
    }

    .modal:not(.modal-ai).show {
        transform: translateX(-34px) !important;
        opacity: 1 !important;
    }

    .modal:not(.modal-ai).hide {
        transform: translateX(100%) !important;
        opacity: 0 !important;
    }

    /* Reduce margins in modal windows */
    .modal-body {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Portfolio modal: adjust columns for small-screen landscape (phones/tablets) */
    .portfolio-modal-gallery { width: 60% !important; }
    .portfolio-modal-details-wrapper { width: 40% !important; }

    /* Timeline optimization in Resume */
    .timeline {
        margin-left: 100px !important;
    }

    .timeline-date {
        left: -150px !important;
        width: 120px !important;
        font-size: 12px !important;
    }

    .timeline-date span {
        font-size: 10px !important;
    }

    .timeline-content {
    padding-left: 10px !important;
  }
}

/* ==========================================================================
   Additional animations for mobile
   ========================================================================== */
@keyframes drawVerticalMobile   { from { height: 0; } to { height: 110px; } }
@keyframes drawVerticalLandscape { from { height: 0; } to { height: 110px; } }
@keyframes drawHorizontalLandscape { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* (removed) Styles for video/iframe in slider no longer used */

@media (max-width: 480px) and (orientation: portrait) {
  #modal-portfolio .modal-content {
    padding-left: 1vw !important;
    padding-right: 1vw !important;
  }
  #modal-portfolio .modal-body {
    padding-left: 1vw !important;
    padding-right: 1vw !important;
  }
  .portfolio-modal-content {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
    padding-top: 0 !important;
  }
  #modal-portfolio .portfolio-container {
    padding-left: 1vw !important;
    padding-right: 1vw !important;
  }
  .portfolio-container {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
  .portfolio-modal-gallery {
    height: auto !important;
    min-height: unset !important;
    width: 100% !important;
    display: block;
  }
  .portfolio-modal-header { height: 44px; padding: 6px 8px; }
  .ps-thumbs { display: flex; margin-top: var(--space-xs); padding-bottom: 8px; margin-bottom: 0; }
  .portfolio-modal-details-wrapper { display: block; position: relative; z-index: 1; padding-top: 0; }
  /* (removed) .portfolio-slide no longer used */
}

/* Project Details (minimalist style) */
.portfolio-project-details {
  margin-bottom: 10px;
}
.project-details-title {
  font-size: 14px;
  color: #222;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  font-weight: 600;
}
.project-details-list { font-size: 12px; line-height: 1.7; color: #444; }
.project-details-label { color: #888; min-width: 70px; display: inline-block; }
.project-details-link { color: #3498db; text-decoration: none; }
.project-details-link:hover { text-decoration: underline; }
.project-details-sep { margin: 12px 0 16px 0; opacity: 0.12; border: none; border-top: 1px solid rgba(0,0,0,0.12); }

.modal-placeholder-text { font-size:16px; color:#555; }
.desc-features { margin-top:0.5em; margin-bottom:0.5em; }
.desc-footer { display:block; margin-top:0.5em; }

.project-details-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: 4px 0 2px 0;
}
.project-tech-tag {
  display: inline-block;
  padding: 4px 12px 4px 12px;
  font-size: 12px;
  color: #333;
  background: #fff;
  border-radius: 6px;
  border: 1.5px solid #e0e0e0;

  font-weight: 500;
  letter-spacing: 0.01em;
  transition: box-shadow 0.2s, background 0.2s;
}
.project-tech-tag:hover {
  background: #f5f5f5;
  box-shadow: 1px 1px 3px var(--shadow-dark), -1px -1px 3px var(--shadow-light);
}

@media (max-width: 768px) {
  .portfolio-thumb {
    width: 48px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .portfolio-thumb {
    width: 36px;
    height: 27px;
  }
}

/* modal-messages removed — nav contacts button navigates to contacts hub */

.portfolio-prev-project span,
.portfolio-next-project span {
    display: inline-block;
    line-height: 1;
    position: relative;
    top: -1px;
}

@media (max-width: 768px) and (orientation: portrait) {
    .portfolio-nav-btn {
        display: none;
    }
}

/* Exit animations for home elements when body has .main-exited */

.home-container,
.center-wave-container,
.clue-resume,
.line-containe_down,
.ai-assistant-container {
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

body.main-exited .home-container {
    opacity: 0;
    transform: translateY(-50%) translateX(-100px);
    pointer-events: none;
}

body.main-exited .center-wave-container,
body.main-exited .center-wave-container.center-ready {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
    pointer-events: none;
}

body.main-exited .clue-resume {
    opacity: 0;
    transform: translateY(-50%) translateX(100px);
    pointer-events: none;
}

body.main-exited .line-containe_down {
    opacity: 0;
    transform: translate(-50%, 150px);
    pointer-events: none;
}

body.main-exited .ai-assistant-container {
    opacity: 0;
    transform: translateY(-50%) translateX(100px);
    pointer-events: none;
}

/* Center Grid Blocks */
.center-blocks-container {
    position: fixed;
    top: 50%;
    left: calc(50% - 15px);
    transform: translate(-50%, -50%);
    width: min(calc(100vw - 230px), 1080px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 52px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    scrollbar-width: none;
    /* padding >= shadow blur + offset (18+6=24px) чтобы тени не обрезались overflow */
    padding: 30px 30px;
    box-sizing: border-box;
}

.center-blocks-container::-webkit-scrollbar {
    display: none;
}

body.main-exited .center-blocks-container {
    pointer-events: auto;
    opacity: 1;
}

body.story-about .center-blocks-container,
body.story-promo .center-blocks-container {
    pointer-events: none;
    opacity: 0.22;
    filter: blur(4px);
    transform: translate(-50%, -50%) scale(0.94);
}

body.contact-visible .center-blocks-container {
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    filter: none;
}

/* ── Package cards ─────────────────────────────────────────────── */
.center-block-card {
    --pkg-accent: #3d8ef0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pkg-accent) 8%, var(--bg-color)) 0%, var(--bg-color) 42%);
    border-radius: 24px;
    padding: 22px 18px 18px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    outline: none;
    filter: none;
    box-shadow:
        0 10px 24px rgba(36, 42, 54, 0.055),
        0 0 0 1px color-mix(in srgb, var(--pkg-accent) 6%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transform: scale(0.82) translateY(50px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.5s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    min-height: 480px;
    box-sizing: border-box;
}

/* featured card — same border-less style */
.center-block-card.featured { border: none; outline: none; }

.center-block-card.featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    border-radius: 28px 28px 0 0;
}

body.main-exited .center-block-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

body.contact-visible .center-block-card {
    transform: scale(0.82) translateY(50px);
    opacity: 0;
    pointer-events: none;
}

body.main-exited.contact-visible .center-block-card:nth-child(1) { transition-delay: 0.35s; }
body.main-exited.contact-visible .center-block-card:nth-child(2) { transition-delay: 0.25s; }
body.main-exited.contact-visible .center-block-card:nth-child(3) { transition-delay: 0.15s; }
body.main-exited.contact-visible .center-block-card:nth-child(4) { transition-delay: 0.05s; }

body.main-exited .center-block-card:nth-child(1) { transition-delay: 0.05s; }
body.main-exited .center-block-card:nth-child(2) { transition-delay: 0.15s; }
body.main-exited .center-block-card:nth-child(3) { transition-delay: 0.25s; }
body.main-exited .center-block-card:nth-child(4) { transition-delay: 0.35s; }

body.main-exited:not(.contact-visible) .center-block-card:hover {
    transform: scale(1) translateY(-5px);
    filter: none;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 22px 44px color-mix(in srgb, var(--pkg-accent) 18%, rgba(36, 42, 54, 0.1)),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ── Convex photo circle ───────────────────────────────────── */
.pkg-circle-photo {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    margin: 0 auto 16px;
    padding: 10px;
    background: var(--bg-color);
    box-shadow:
        8px 8px 18px rgba(158, 164, 172, 0.38),
        -7px -7px 16px rgba(255, 255, 255, 0.94);
    flex-shrink: 0;
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.center-block-card:hover .pkg-circle-photo {
    transform: translateY(-2px);
    box-shadow:
        10px 12px 22px rgba(158, 164, 172, 0.42),
        -8px -8px 18px rgba(255, 255, 255, 0.98);
}

.pkg-circle-photo-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 3px 3px 7px rgba(140, 146, 154, 0.16),
        inset -2px -2px 5px rgba(255, 255, 255, 0.65);
}

.pkg-circle-photo-inner img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    filter: none;
}

.pkg-circle-photo-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.22) 0%,
        transparent 42%,
        rgba(0, 0, 0, 0.06) 100%
    );
}

/* ── Card top row: icon + badge ────────────────────────────── */
.pkg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.pkg-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--ico-color);
    box-shadow: 0 8px 16px rgba(36, 42, 54, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.center-block-card:hover .pkg-icon-wrap {
    transform: none;
    box-shadow: 0 10px 18px rgba(36, 42, 54, 0.18);
}

.pkg-icon-wrap i {
    font-size: 20px;
    color: #fff;
}

/* ── Badge ─────────────────────────────────────────────────── */
.package-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid;
}

.package-badge.badge-lite {
    color: #0369a1;
    background: rgba(3, 105, 161, 0.08);
    border-color: rgba(3, 105, 161, 0.2);
}

.package-badge.badge-popular {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.3);
}

.package-badge.badge-pro {
    color: #0f766e;
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.28);
}

.package-badge.badge-vip {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.22);
}

/* ── Title + tagline ───────────────────────────────────────── */
.pkg-title-block {
    margin-bottom: 14px;
}

.package-title {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 5px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.pkg-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #8a9099;
    margin: 0;
    line-height: 1.45;
}

/* ── Price ─────────────────────────────────────────────────── */
.package-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--pkg-accent) 16%, rgba(0,0,0,0.06));
}

.price-from {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: color-mix(in srgb, var(--pkg-accent) 50%, #9aa0a8);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.package-price .price-val {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: linear-gradient(
        135deg,
        var(--pkg-accent) 0%,
        color-mix(in srgb, var(--pkg-accent) 42%, #1a1f28) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--pkg-accent) 26%, transparent));
}

.price-cur {
    font-size: 16px;
    font-weight: 700;
    color: var(--pkg-accent);
    line-height: 1;
    transform: translateY(-1px);
}

/* ── Features list ─────────────────────────────────────────── */
.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.package-features li {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.045);
    line-height: 1.4;
}

.package-features li:last-child { border-bottom: none; }

.package-features li i {
    font-size: 10px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.package-features li.feat-yes { color: #374151; }
.package-features li.feat-yes i { color: #10b981; }

.package-features li.feat-no { color: #b0b8c4; }
.package-features li.feat-no i { color: #c9cdd4; }

/* ── Meta chips (timeline + revisions) ─────────────────────── */
.pkg-meta-row {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.pkg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(107, 114, 128, 0.85);
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    letter-spacing: 0.02em;
}

.pkg-chip i { font-size: 10px; opacity: 0.6; }

/* ── CTA button ────────────────────────────────────────────── */
.package-btn {
    width: 100%;
    padding: 13px 18px;
    border-radius: 14px;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    color: var(--ico-color);
    background: var(--bg-color);
    box-shadow: 4px 4px 9px var(--shadow-dark), -4px -4px 9px var(--shadow-light);
}

.package-btn:hover {
    background: #3d5a78;
    color: #fff;
    box-shadow: 0 5px 16px rgba(61, 90, 120, 0.30);
    transform: translateY(-2px);
}

.center-block-card.featured .package-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.28);
}

.center-block-card.featured .package-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 7px 20px rgba(16, 185, 129, 0.40);
    transform: translateY(-2px);
}

.package-btn:active {
    transform: translateY(0);
}

@property --pkg-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes pkgSpinBorder {
    to { --pkg-angle: 360deg; }
}

/* ══════════════════════════════════════════════════════════════
   CARD COLOR THEMES  — clean unified neumorphic (radio style)
   All cards share the same light-blue neumorphic background.
   Color identity only through accent top-line, icon & check color.
   ══════════════════════════════════════════════════════════════ */

/* All cards share same bg — no separate hover bg change to avoid outline */

/* ── Card 1: blue icon bg ── */
.card-lite { --pkg-accent: #3d8ef0; }
.card-lite .pkg-icon-wrap { background: #3d8ef0; }
.card-lite .feat-yes i { color: #3d8ef0; }
.card-lite .package-btn {
    background: linear-gradient(135deg, #5aa3f5, #2563eb);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
}
.card-lite .package-btn:hover {
    background: linear-gradient(135deg, #3d8ef0, #1d4ed8);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.40);
    transform: translateY(-2px);
}

.card-popular { --pkg-accent: #10b981; }
.card-popular .pkg-icon-wrap { background: #10b981; }
.card-popular .fa-check { color: #10b981; }
.card-popular.featured::before { background: linear-gradient(90deg, #10b981, #06b6d4); }

.card-pro { --pkg-accent: #0d9488; }
.card-pro .pkg-icon-wrap { background: #0d9488; }
.card-pro .fa-check { color: #0d9488; }
.card-pro .package-btn {
    background: linear-gradient(135deg, #2dd4bf, #0f766e);
    color: #fff;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.28);
}
.card-pro .package-btn:hover {
    background: linear-gradient(135deg, #14b8a6, #115e59);
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.40);
    transform: translateY(-2px);
}

.card-vip { --pkg-accent: #f59e0b; }
.card-vip .pkg-icon-wrap { background: #f59e0b; }
.card-vip .fa-check { color: #b45309; }
.card-vip .package-btn {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #fff;
    box-shadow: 0 4px 16px rgba(168, 100, 0, 0.28);
}
.card-vip .package-btn:hover {
    background: linear-gradient(135deg, #d97706, #92400e);
    box-shadow: 0 8px 22px rgba(168, 100, 0, 0.40);
    transform: translateY(-2px);
}

.center-block-card::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    box-sizing: border-box;
    background: conic-gradient(
        from var(--pkg-angle, 0deg),
        transparent 0%,
        transparent 55%,
        var(--pkg-accent, #3d8ef0) 78%,
        transparent 92%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.main-exited:not(.contact-visible) .center-block-card:hover::after {
        opacity: 0.9;
        animation: pkgSpinBorder 2.8s linear infinite;
    }
}

/* ── Order form: tariff selector bar ──────────────────────── */
.order-tariff-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: var(--bg-color);
    box-shadow:
        6px 6px 16px rgba(150, 158, 170, 0.28),
        -6px -6px 16px rgba(255, 255, 255, 0.82);
    border: none;
    position: relative;
    z-index: 8;
    cursor: pointer;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.order-tariff-bar:hover {
    transform: translateY(-2px);
    box-shadow:
        8px 10px 20px rgba(150, 158, 170, 0.30),
        -7px -7px 18px rgba(255, 255, 255, 0.88);
}

.order-tariff-bar.odt-open,
.order-tariff-bar.odt-open:hover {
    transform: none;
    cursor: default;
    z-index: 20;
}

.order-tariff-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-color);
    box-shadow:
        4px 4px 10px rgba(150, 158, 170, 0.28),
        -4px -4px 10px rgba(255, 255, 255, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.order-tariff-icon-wrap i {
    font-size: 16px;
    color: var(--ico-color);
    transition: color 0.3s ease;
}

.order-tariff-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.order-tariff-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: #b8c4d0;
    line-height: 1;
}

.order-tariff-name {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1e2430;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-tariff-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.order-tariff-price {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #3c4452;
    white-space: nowrap;
}

.order-tariff-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #6a7480;
    background: var(--bg-color);
    box-shadow:
        3px 3px 8px rgba(150, 158, 170, 0.26),
        -3px -3px 8px rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 14px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, box-shadow 0.25s ease;
}

.order-tariff-toggle:hover,
.order-tariff-bar.odt-open .order-tariff-toggle {
    color: #1e2430;
    box-shadow:
        4px 4px 10px rgba(150, 158, 170, 0.28),
        -4px -4px 10px rgba(255, 255, 255, 0.88);
}

.odt-arrow {
    font-size: 9px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.order-tariff-bar.odt-open .odt-arrow { transform: rotate(180deg); }

.odt-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--bg-color);
    border-radius: 18px;
    border: none;
    box-shadow:
        6px 10px 22px rgba(150, 158, 170, 0.28),
        -4px -4px 12px rgba(255, 255, 255, 0.7);
    z-index: 30;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transform-origin: top center;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}

.order-tariff-bar.odt-open .odt-dropdown {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    flex: 1 0 100%;
    margin-top: 4px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}

.odt-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.18s ease;
    opacity: 0;
    transform: translateX(-10px);
}

.odt-item:last-child { border-bottom: none; }

.order-tariff-bar.odt-open .odt-item {
    opacity: 1;
    transform: translateX(0);
}

.order-tariff-bar.odt-open .odt-item:nth-child(1) { transition: background 0.18s, opacity 0.22s 0.04s ease, transform 0.28s 0.04s cubic-bezier(0.34,1.4,0.64,1); }
.order-tariff-bar.odt-open .odt-item:nth-child(2) { transition: background 0.18s, opacity 0.22s 0.10s ease, transform 0.28s 0.10s cubic-bezier(0.34,1.4,0.64,1); }
.order-tariff-bar.odt-open .odt-item:nth-child(3) { transition: background 0.18s, opacity 0.22s 0.16s ease, transform 0.28s 0.16s cubic-bezier(0.34,1.4,0.64,1); }
.order-tariff-bar.odt-open .odt-item:nth-child(4) { transition: background 0.18s, opacity 0.22s 0.22s ease, transform 0.28s 0.22s cubic-bezier(0.34,1.4,0.64,1); }

.odt-item:hover { background: rgba(0,0,0,0.03); }
.odt-item.odt-active { background: rgba(0,0,0,0.04); }

.odt-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-color);
    box-shadow:
        3px 3px 8px rgba(150, 158, 170, 0.28),
        -3px -3px 8px rgba(255, 255, 255, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.odt-item-icon i { font-size: 14px; }

.odt-item[data-value="Landing Page"]     .odt-item-icon i { color: #0369a1; }
.odt-item[data-value="Бизнес-сайт"]      .odt-item-icon i { color: #059669; }
.odt-item[data-value="Интернет-магазин"] .odt-item-icon i { color: #0d9488; }
.odt-item[data-value="Индивидуальный"]   .odt-item-icon i { color: #7c3aed; }

.odt-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.odt-item-name {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1e2430;
    line-height: 1.2;
}

.odt-item-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #9aa6b0;
    line-height: 1.3;
}

.odt-item-price {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #5a6272;
    white-space: nowrap;
    flex-shrink: 0;
}

.odt-item.odt-active .odt-item-price::after {
    content: ' ✓';
    color: #10b981;
}

.order-tariff-bar[data-tariff="Landing Page"]     .order-tariff-icon-wrap i { color: #0369a1; }
.order-tariff-bar[data-tariff="Бизнес-сайт"]      .order-tariff-icon-wrap i { color: #059669; }
.order-tariff-bar[data-tariff="Интернет-магазин"]  .order-tariff-icon-wrap i { color: #0d9488; }
.order-tariff-bar[data-tariff="Индивидуальный"]    .order-tariff-icon-wrap i { color: #7c3aed; }

/* ── Scroll contact header tweak ───────────────────────────── */
.scroll-contact-header {
    text-align: center;
    margin-bottom: 14px;
    padding-top: 0;
    opacity: 0;
    transform: translateY(14px);
}

.scroll-contact-eyebrow {
    margin: 0 0 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #c0c8d0;
}

.scroll-contact-header h3 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 0.92;
}

.sc-title-thin {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: clamp(15px, 1.8vw, 20px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #a8b2bc;
    margin: 0;
}

.sc-title-main {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: 0.01em;
    color: #2a3038;
    margin: 2px 0 0;
}

.scroll-contact-hint {
    margin: 8px 0 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #8a96a2;
    letter-spacing: 0.02em;
}

/* Contact form shown on the next scroll step */
.scroll-contact-container,
.scroll-contact-container *,
.contact-details-modal,
.contact-details-modal * {
    box-sizing: border-box;
}

.scroll-contact-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(92vw, 680px);
    max-height: min(92vh, 680px);
    padding: 24px 28px 32px;
    z-index: 7;
    pointer-events: none;
    overflow: visible;
    max-height: none;
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.88);
    filter: blur(10px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.55s ease;
}

/* ── Modern scrollbar for textarea & contact panel ─────────── */
.scroll-contact-message textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(61, 90, 120, 0.18) transparent;
}

.scroll-contact-message textarea::-webkit-scrollbar {
    width: 4px;
}

.scroll-contact-message textarea::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;
}

.scroll-contact-message textarea::-webkit-scrollbar-thumb {
    background: rgba(61, 90, 120, 0.16);
    border-radius: 99px;
    transition: background 0.2s ease;
}

.scroll-contact-message textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(61, 90, 120, 0.36);
}

.scroll-contact-container {
    scrollbar-width: none;
}
.scroll-contact-container::-webkit-scrollbar {
    display: none;
}
/* ─────────────────────────────────────────────────────────── */

body.contact-visible,
body.contacts-hub-visible {
    overflow: hidden;
}

body.contact-visible .scroll-contact-container {
    pointer-events: auto;
    opacity: 0;
    transform: translate(-50%, -32%) scale(0.94);
    filter: blur(8px);
}

body.story-dir-up.contact-visible .scroll-contact-container {
    transform: translate(-50%, -68%) scale(0.94);
}

body.contact-visible.contact-emerged .scroll-contact-container {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
}

body.contact-visible.contact-exit-up .scroll-contact-container {
    opacity: 0 !important;
    transform: translate(-50%, -78%) scale(0.92) !important;
    filter: blur(10px) !important;
    pointer-events: none !important;
}

body.contact-visible.contact-exit-down .scroll-contact-container {
    opacity: 0 !important;
    transform: translate(-50%, -22%) scale(0.92) !important;
    filter: blur(10px) !important;
    pointer-events: none !important;
}

.scroll-contact-panel {
    width: 100%;
    padding: 0;
    position: relative;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.scroll-contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    transform: translateY(18px);
    width: 100%;
}

body.contact-visible.contact-emerged .scroll-contact-header {
    animation: contact-content-up 0.48s ease forwards;
    animation-delay: 0.5s;
}

body.contact-visible.contact-emerged .scroll-contact-form {
    animation: contact-content-up 0.5s ease forwards;
    animation-delay: 0.2s;
}

.scroll-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
}

.scroll-contact-message {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

.scroll-contact-message > span:not(.scroll-contact-actions):not(.brief-field-label) {
    display: none;
}

.brief-field-label {
    position: absolute;
    top: 16px;
    left: 22px;
    z-index: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #3b6fd4;
    pointer-events: none;
}

.scroll-contact-message textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    outline: none;
    border-radius: 24px;
    min-height: clamp(180px, 28vh, 260px);
    max-height: min(40vh, 300px);
    padding: 40px 110px 64px 22px;
    color: #2a3038;
    caret-color: #3b6fd4;
    background:
        linear-gradient(#eef0f3, #eef0f3) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(90, 128, 196, 0.48) 100%) border-box;
    box-shadow:
        inset 3px 4px 9px rgba(155, 162, 172, 0.16),
        inset -3px -4px 8px rgba(255, 255, 255, 0.86);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    resize: none;
    overflow-y: auto;
    opacity: 0;
    transform: scaleX(0.18) scaleY(0.55);
    transform-origin: center center;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.scroll-contact-message textarea:focus {
    background:
        linear-gradient(#eef0f3, #eef0f3) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(90, 128, 196, 0.48) 100%) border-box;
    box-shadow:
        inset 3px 4px 9px rgba(155, 162, 172, 0.16),
        inset -3px -4px 8px rgba(255, 255, 255, 0.86);
}

.scroll-contact-message:focus-within .brief-field-label {
    color: #3b6fd4;
}

.scroll-contact-message textarea::placeholder {
    color: rgba(90, 102, 114, 0.42);
    font-weight: 400;
    opacity: 1;
}

.scroll-contact-message textarea::-webkit-input-placeholder {
    color: rgba(90, 102, 114, 0.42);
    font-weight: 400;
    opacity: 1;
}

body.contact-visible.contact-emerged .scroll-contact-message textarea {
    animation: contact-chat-open 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.12s;
}

.scroll-contact-message textarea.contact-field-empty {
    animation: contactFieldPulse 0.45s ease;
}

@keyframes contactFieldPulse {
    0%, 100% {
        box-shadow:
            inset 3px 4px 9px rgba(155, 162, 172, 0.16),
            inset -3px -4px 8px rgba(255, 255, 255, 0.86);
    }
    40% {
        box-shadow:
            inset 3px 4px 9px rgba(155, 162, 172, 0.16),
            inset -3px -4px 8px rgba(255, 255, 255, 0.86),
            0 0 0 2px rgba(176, 74, 74, 0.14);
    }
}

.contact-file-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: #7a8894;
}

.contact-file-name[hidden] { display: none !important; }

.scroll-contact-actions {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    background: transparent;
    backdrop-filter: none;
    border: none;
    padding: 6px;
    border-radius: 30px;
    box-shadow: none;
}

body.contact-visible.contact-emerged .scroll-contact-actions {
    animation: contact-actions-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.48s;
}

.scroll-contact-actions .contact-file-button,
.scroll-contact-actions .contact-send-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border: none;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scroll-contact-actions .contact-file-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.scroll-contact-actions .contact-file-button {
    position: relative;
    background: var(--bg-color);
    color: var(--ico-color);
    box-shadow: 3px 3px 8px rgba(150,152,158,0.35), -3px -3px 8px rgba(255,255,255,0.70);
}

.scroll-contact-actions .contact-file-button:hover {
    color: #4a7ec8;
    transform: translateY(-2px);
    box-shadow: 4px 5px 12px rgba(150,152,158,0.36), -4px -4px 12px rgba(255,255,255,0.82);
}

.scroll-contact-actions .contact-send-button {
    color: #fff;
    background: linear-gradient(160deg, #6ea4e8, #3b6fd4);
    box-shadow: 5px 6px 14px rgba(59, 111, 212, 0.28), -2px -2px 8px rgba(255,255,255,0.45);
}

.scroll-contact-actions .contact-send-button:hover {
    transform: translateY(-2px);
    box-shadow: 6px 8px 16px rgba(59, 111, 212, 0.34), -2px -2px 8px rgba(255,255,255,0.5);
}

.scroll-contact-actions .contact-file-button:active,
.scroll-contact-actions .contact-send-button:active {
    transform: translateY(0);
}

.scroll-contact-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    opacity: 0;
    transform: translateY(14px);
}

body.contact-visible.contact-emerged .scroll-contact-bottom {
    animation: contact-content-up 0.5s ease forwards;
    animation-delay: 0.55s;
}

.scroll-contact-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scroll-contact-links .scroll-contact-link {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--bg-color);
    color: var(--ico-color);
    font-size: 15px;
    box-shadow:
        4px 4px 10px rgba(150, 158, 170, 0.28),
        -4px -4px 10px rgba(255, 255, 255, 0.82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.scroll-contact-links .scroll-contact-link:hover {
    transform: translateY(-3px);
    box-shadow:
        6px 8px 14px rgba(150, 158, 170, 0.30),
        -5px -5px 12px rgba(255, 255, 255, 0.9);
}

.scroll-contact-links .scroll-contact-link[data-url^="tel:"]:hover { color: #3dba55; }
.scroll-contact-links .scroll-contact-link[data-url*="wa.me"]:hover { color: #25d366; }
.scroll-contact-links .scroll-contact-link[data-url^="mailto:"]:hover { color: #5a8fd6; }
.scroll-contact-links .scroll-contact-link[data-url^="skype:"]:hover { color: #00aff0; }

.scroll-contact-links .scroll-contact-link:active {
    transform: translateY(0);
}

.scroll-ai-assistant-button {
    margin: 0;
    border: none;
    background: var(--bg-color);
    color: #6b63c9;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow:
        4px 4px 10px rgba(150, 158, 170, 0.26),
        -4px -4px 10px rgba(255, 255, 255, 0.82);
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    animation: none;
    flex-shrink: 0;
}

.scroll-ai-assistant-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: inherit;
    background: none;
    box-shadow: none;
    width: auto;
    height: auto;
}

.scroll-ai-assistant-button:hover {
    color: #5b54c4;
    transform: translateY(-2px);
    box-shadow:
        6px 8px 14px rgba(150, 158, 170, 0.30),
        -5px -5px 12px rgba(255, 255, 255, 0.9);
}

.scroll-ai-assistant-button:active {
    transform: translateY(0);
}

@keyframes ai-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.25);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
    }
}

@keyframes contact-center-grow {
    0%   { opacity: 0; transform: scale(0.72) translateY(24px); filter: blur(8px); }
    40%  { opacity: 1; filter: blur(0); }
    65%  { transform: scale(1.025) translateY(-4px); }
    82%  { transform: scale(0.988) translateY(2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes contact-content-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contact-chat-open {
    0% {
        opacity: 0;
        transform: scaleX(0.18) scaleY(0.55);
        border-radius: 50%;
    }
    62% {
        opacity: 1;
        transform: scaleX(1.03) scaleY(1);
        border-radius: 20px;
    }
    100% {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
        border-radius: 20px;
    }
}

@keyframes contact-actions-pop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.contact-details-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.contact-details-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.contact-details-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(220, 220, 220, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.contact-details-dialog {
    position: relative;
    width: min(100%, 420px);
    max-height: min(88vh, 680px);
    overflow: visible;
    box-sizing: border-box;
    padding: clamp(26px, 5vw, 34px) clamp(20px, 5vw, 28px) 28px;
    border-radius: 22px;
    background: var(--bg-color);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 28px 64px rgba(36, 42, 54, 0.12),
        0 2px 8px rgba(36, 42, 54, 0.04);
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.36s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-details-dialog::-webkit-scrollbar {
    width: 6px;
    height: 0px; /* Hide horizontal scrollbar track completely */
}

.contact-details-dialog::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.contact-details-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.contact-details-modal.active .contact-details-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.contact-details-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    color: rgba(42, 45, 51, 0.42);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.contact-details-close:hover {
    color: #2a2d33;
    background: rgba(255, 255, 255, 0.8);
    transform: none;
}

.contact-details-dialog h3 {
    margin: 0 48px 8px 0;
    color: var(--text-color);
    font-size: clamp(20px, 4vw, 24px);
    line-height: 1.2;
    font-weight: 700;
}

.contact-details-dialog > p {
    margin: 0 0 20px;
    color: rgba(47, 54, 64, 0.65);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
}

.contact-details-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

.contact-details-form label,
.contact-details-form .contact-field,
.messenger-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(42, 45, 51, 0.58);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
    box-sizing: border-box;
}

.messenger-field {
    display: none;
    position: relative;
}

.contact-details-status {
    margin: 0 0 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    min-height: 1.2em;
    text-transform: none;
    letter-spacing: 0;
}
.contact-details-status.is-error { color: #b04a4a; }
.contact-details-status.is-ok { color: #2f9a64; }

.contact-confirm-button {
    min-height: 50px;
    margin-top: 8px;
    border: none;
    border-radius: 14px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    color: #f7f7f8;
    background: #2a2d33;
    box-shadow: 0 10px 24px rgba(42, 45, 51, 0.18);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-confirm-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f7f7f8;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    font-size: 11px;
}

.contact-confirm-button:hover {
    background: #1f2227;
    box-shadow: 0 12px 28px rgba(42, 45, 51, 0.22);
    transform: translateY(-1px);
}

.contact-confirm-button:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(42, 45, 51, 0.16);
}

.contact-confirm-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.contact-details-form input[name="clientName"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    outline: none;
    border-radius: 14px;
    padding: 0 16px;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 2px rgba(36, 42, 54, 0.04);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.contact-details-form input[name="clientName"]:focus {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(61, 90, 120, 0.28);
    box-shadow: 0 0 0 4px rgba(61, 90, 120, 0.08);
}

.phone-field {
    position: relative;
}

.phone-input-shell {
    display: flex;
    align-items: stretch;
    min-height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 2px rgba(36, 42, 54, 0.04);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.phone-input-shell.is-focus {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(61, 90, 120, 0.28);
    box-shadow: 0 0 0 4px rgba(61, 90, 120, 0.08);
}

.phone-input-shell.is-invalid {
    border-color: rgba(176, 74, 74, 0.35);
    box-shadow: 0 0 0 4px rgba(176, 74, 74, 0.08);
}

.phone-country-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0 5px 5px;
    padding: 0 10px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.phone-country-btn:hover,
.phone-field.is-open .phone-country-btn {
    background: #fff;
    box-shadow: none;
}

.phone-flag {
    font-size: 15px;
    line-height: 1;
}

.phone-dial {
    font-variant-numeric: tabular-nums;
}

.phone-country-btn i,
.messenger-select-btn > .fa-chevron-down {
    font-size: 9px;
    color: rgba(47, 54, 64, 0.4);
    transition: transform 0.2s ease;
    margin-left: 2px;
}

.phone-field.is-open .phone-country-btn i,
.messenger-field.is-open .messenger-select-btn > .fa-chevron-down {
    transform: rotate(180deg);
}

.phone-input-shell input[name="clientPhone"] {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px 0 10px;
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-transform: none;
}

.phone-input-shell input[name="clientPhone"]:focus {
    box-shadow: none;
}

.phone-field-hint {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(47, 54, 64, 0.45);
    line-height: 1.35;
}

.phone-field-hint.is-error {
    color: #b04a4a;
}

.phone-country-list,
.messenger-select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 12;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    border-radius: 16px;
    background: rgba(245, 246, 248, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 40px rgba(36, 42, 54, 0.14);
}

.phone-country-list li,
.messenger-select-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-color);
    transition: background 0.15s ease;
}

.phone-country-list li:hover,
.messenger-select-list li:hover {
    background: rgba(255, 255, 255, 0.7);
}

.phone-country-list li.is-active,
.messenger-select-list li.is-active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(36, 42, 54, 0.06);
}

.phone-country-list .phone-country-name {
    flex: 1;
}

.phone-country-list .phone-country-code {
    color: rgba(47, 54, 64, 0.4);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}

.messenger-select-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 2px rgba(36, 42, 54, 0.04);
    color: var(--text-color);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.messenger-field.is-open .messenger-select-btn {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(61, 90, 120, 0.28);
    box-shadow: 0 0 0 4px rgba(61, 90, 120, 0.08);
}

.messenger-select-label {
    flex: 1;
}

.messenger-select-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}

.messenger-select-icon.is-telegram { background: #2AABEE; }
.messenger-select-icon.is-whatsapp { background: #25D366; }
.messenger-select-icon.is-viber { background: #7360F2; }

.messenger-select-list li .messenger-select-icon {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.messenger-select-check {
    margin-left: auto;
    color: rgba(42, 45, 51, 0.35);
    font-size: 11px;
    opacity: 0;
}

.messenger-select-list li.is-active .messenger-select-check {
    opacity: 1;
    color: #2a2d33;
}

.contact-choice-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: rgba(255, 255, 255, 0.32);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}

.contact-choice-group label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: 0;
}

.contact-choice-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-choice-group span {
    min-height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(47, 54, 64, 0.5);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.contact-choice-group input:checked + span {
    color: var(--text-color);
    background: #fff;
    box-shadow: 0 1px 3px rgba(36, 42, 54, 0.08);
}

/* Responsive adjustments for horizontal screens & mobile */
@media (max-height: 800px) and (min-width: 1025px) {
    .center-blocks-container {
        gap: 36px;
        width: min(calc(100vw - 210px), 1220px);
        max-height: calc(100vh - 20px);
        padding: 30px;
    }

    .center-block-card {
        min-height: 400px;
        padding: 18px 14px;
    }

    .pkg-circle-photo { width: 116px; height: 116px; padding: 8px; margin-bottom: 12px; }
    .pkg-icon-wrap { width: 44px; height: 44px; border-radius: 13px; }
    .pkg-icon-wrap i { font-size: 17px; }
    .package-title { font-size: 17px; }
    .package-price .price-val { font-size: 25px; }
    .package-features li { font-size: 12px; padding: 5px 0; }
    .package-btn { padding: 11px 14px; font-size: 13px; }
}

@media (max-height: 680px) and (min-width: 1025px) {
    .center-blocks-container {
        gap: 20px;
        width: min(calc(100vw - 200px), 1180px);
    }

    .center-block-card {
        min-height: 360px;
        padding: 12px 10px;
    }

    .pkg-circle-photo { width: 94px; height: 94px; padding: 7px; margin-bottom: 10px; }

    .pkg-icon-wrap { width: 38px; height: 38px; border-radius: 11px; }
    .pkg-icon-wrap i { font-size: 15px; }
    .package-title { font-size: 15px; }
    .package-price .price-val { font-size: 22px; }
    .pkg-tagline { font-size: 11.5px; }
    .package-features li { font-size: 11.5px; gap: 6px; padding: 4px 0; }
    .pkg-chip { font-size: 10px; padding: 4px 8px; }
}

@media (max-width: 1100px) and (min-width: 769px) {
    .center-blocks-container {
        width: min(calc(100vw - 160px), 920px);
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        max-height: 82vh;
        overflow-y: auto;
        padding: 30px;
        left: 50%;
    }
    
    .center-block-card {
        min-height: 420px;
    }
    
    .scroll-contact-container {
        max-height: 86vh;
        overflow-y: auto;
        padding: 18px 10px;
    }
}

@media (max-width: 768px) {
    .center-blocks-container {
        width: calc(100vw - 32px);
        left: 50%;
        grid-template-columns: 1fr;
        gap: 28px;
        max-height: 84vh;
        overflow-y: auto;
        padding: 30px 20px;
    }
    
    .center-block-card {
        min-height: auto;
        padding: 20px 16px;
    }

    .scroll-contact-container {
        top: 50%;
        width: min(92vw, 560px);
        max-height: min(88vh, 620px);
        overflow-y: auto;
        padding: 10px 0 max(10px, env(safe-area-inset-bottom));
        scrollbar-width: none;
    }

    .scroll-contact-container::-webkit-scrollbar {
        display: none;
    }

    .scroll-contact-panel {
        padding: 24px 20px;
    }

    .scroll-contact-header h3 {
        font-size: clamp(22px, 7vw, 28px);
        line-height: 1.08;
    }

    .scroll-contact-header p {
        max-width: 32ch;
        margin: 0 auto;
        font-size: 13px;
    }

    .scroll-contact-actions {
        right: 8px;
        bottom: 8px;
        gap: 6px;
        padding: 4px;
    }

    .scroll-contact-actions .contact-file-button,
    .scroll-contact-actions .contact-send-button {
        width: 34px;
        height: 34px;
        min-height: 34px;
        font-size: 13.5px;
    }

    .scroll-contact-message textarea {
        padding: 36px 98px 54px 16px;
        min-height: clamp(160px, 32vh, 240px);
        max-height: 46vh;
        font-size: 14.5px;
        line-height: 1.45;
        border-radius: 16px;
    }

    .scroll-contact-links {
        gap: 12px;
        margin-top: 18px;
    }

    .scroll-contact-links .scroll-contact-link {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .contact-details-dialog {
        padding: 26px 20px;
    }
}

@media (max-width: 420px) {
    .scroll-contact-container {
        width: 94vw;
        max-height: 90vh;
    }

    .scroll-contact-header {
        margin-bottom: 12px;
    }

    .scroll-contact-header h3 {
        font-size: 22px;
    }

    .scroll-contact-header p {
        font-size: 12.5px;
    }

    .scroll-contact-message textarea {
        min-height: clamp(150px, 30vh, 210px);
        padding: 34px 88px 50px 14px;
        border-radius: 16px;
    }

    .scroll-contact-actions .contact-file-button,
    .scroll-contact-actions .contact-send-button {
        width: 32px;
        height: 32px;
        min-height: 32px;
        font-size: 13px;
    }

    .scroll-contact-actions {
        right: 8px;
        bottom: 8px;
    }

    .scroll-contact-links {
        display: grid;
        grid-template-columns: repeat(4, 40px);
        justify-content: center;
        gap: 8px;
    }

    .scroll-contact-links .scroll-contact-link {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .contact-details-modal {
        padding: 14px;
    }

    .contact-details-dialog {
        width: 100%;
        padding: 24px 18px;
    }
}

@media (max-height: 640px) {
    .scroll-contact-header {
        margin-bottom: 12px;
    }

    .scroll-contact-header p {
        display: none;
    }

    .scroll-contact-message textarea {
        min-height: clamp(140px, 30vh, 200px);
        max-height: 42vh;
    }

    .scroll-contact-links {
        margin-top: 12px;
    }
}

@media (max-width: 380px), (max-height: 560px) {
    .scroll-contact-container {
        top: 52%;
        max-height: 92vh;
    }

    .scroll-contact-header {
        margin-bottom: 10px;
    }

    .scroll-contact-header h3 {
        font-size: 20px;
    }

    .scroll-contact-message textarea {
        min-height: clamp(130px, 28vh, 190px);
        max-height: 40vh;
        padding: 32px 84px 46px 14px;
    }

    .scroll-contact-actions .contact-file-button,
    .scroll-contact-actions .contact-send-button {
        width: 30px;
        height: 30px;
        min-height: 30px;
    }

    .scroll-contact-links {
        grid-template-columns: repeat(4, 36px);
        gap: 8px;
        margin-top: 10px;
    }

    .scroll-contact-links .scroll-contact-link {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Contacts Hub — 4th full-screen view
   ========================================================================== */

/* Скрываем пакеты когда показываем хаб */
body.contacts-hub-visible .center-blocks-container {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.94);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

body.contacts-hub-visible .scroll-contact-container {
    pointer-events: none;
}

/* ── Full-screen overlay ── */
.contacts-hub-section {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    pointer-events: none;
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

body.contacts-hub-visible .contacts-hub-section {
    opacity: 0;
    pointer-events: none;
    transform: translateY(48px);
}

body.story-dir-up.contacts-hub-visible .contacts-hub-section {
    transform: translateY(-48px);
}

body.contacts-hub-visible.contacts-hub-emerged .contacts-hub-section {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

body.hub-exit-up .contacts-hub-section {
    opacity: 0 !important;
    transform: translateY(-56px) !important;
    pointer-events: none !important;
}

body.hub-exit-down .contacts-hub-section {
    opacity: 0 !important;
    transform: translateY(56px) !important;
    pointer-events: none !important;
}

/* ── Inner container ── */
.contacts-hub-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 32px;
    max-width: 700px;
    width: 100%;
}

.contacts-hub-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ico-color);
    margin: 0 0 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.05s, transform 0.5s ease 0.05s;
}

body.contacts-hub-visible.contacts-hub-emerged .contacts-hub-eyebrow {
    opacity: 0.45;
    transform: translateY(0);
}

.contacts-hub-title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-color);
    margin: 0 0 clamp(36px, 7vh, 60px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease 0.1s, transform 0.55s ease 0.1s;
    letter-spacing: -0.5px;
}

body.contacts-hub-visible.contacts-hub-emerged .contacts-hub-title {
    opacity: 1;
    transform: translateY(0);
}

/* ── Одна строка: основные слева | разделитель | AI справа ── */
.contacts-hub-row {
    display: flex;
    align-items: center;
    gap: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.2s, transform 0.55s ease 0.2s;
}

body.contacts-hub-visible.contacts-hub-emerged .contacts-hub-row {
    opacity: 1;
    transform: translateY(0);
}

.chub-group {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 28px);
}

.chub-divider {
    width: 1px;
    height: 52px;
    background: rgba(74,82,96,0.14);
    margin: 0 clamp(20px, 4vw, 36px);
    flex-shrink: 0;
}

/* ── Round convex button ── */
.chub-btn {
    width: clamp(50px, 6.5vw, 66px);
    height: clamp(50px, 6.5vw, 66px);
    border-radius: 50%;
    border: none;
    background: var(--bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(17px, 2.4vw, 22px);
    box-shadow:
        5px  5px  12px rgba(150,152,158,0.32),
       -5px -5px  12px rgba(255,255,255,0.72);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
    position: relative;
    outline: none;
}

/* глянцевый блик */
.chub-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 35% 28%,
        rgba(255,255,255,0.50) 0%,
        rgba(255,255,255,0.08) 50%,
        transparent 70%
    );
    pointer-events: none;
}

.chub-btn:hover {
    transform: translateY(-5px) scale(1.06);
    box-shadow:
        8px  8px  22px rgba(150,152,158,0.48),
       -8px -8px  22px rgba(255,255,255,0.82);
}

.chub-btn:active {
    transform: scale(0.94);
    box-shadow:
        inset 4px  4px  10px rgba(150,152,158,0.35),
        inset -4px -4px 10px rgba(255,255,255,0.70);
}

/* AI кнопка — чуть меньше основных, акцент через надпись */
.chub-group-ai .chub-btn {
    width: clamp(44px, 5.5vw, 58px);
    height: clamp(44px, 5.5vw, 58px);
    font-size: clamp(15px, 2.1vw, 19px);
}

.chub-group-ai {
    align-items: center;
    gap: 10px;
}

.chub-ai-label {
    font-family: 'Titillium Web', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ico-color);
    opacity: 0.75;
    white-space: nowrap;
    pointer-events: none;
}

/* цвета иконок */
.chub-phone { color: #3dba55; }
.chub-wa    { color: #25d366; }
.chub-tg    { color: #229ed9; }
.chub-mail  { color: var(--ico-color); }
.chub-ai    { color: #7c6cf5; }

/* портретная ориентация / мобайл */
@media (max-width: 600px) or (orientation: portrait) {
    .contacts-hub-row {
        flex-direction: column;
        gap: clamp(24px, 5vw, 36px);
    }
    .chub-divider {
        width: 52px;
        height: 1px;
        margin: 0;
    }
    .chub-group {
        gap: clamp(16px, 5vw, 28px);
    }
}

/* адаптив (старый, оставляем для совместимости) */
@media (max-width: 480px) {
    .chub-btn { width: 46px; height: 46px; font-size: 16px; }
    .chub-group-ai .chub-btn { width: 40px; height: 40px; font-size: 14px; }
    .chub-ai-label { font-size: 11px; }
    .chub-group { gap: 12px; }
}