/* About Page Styles */

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed;
    top: 80px; /* Below navbar */
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 999;
    overflow: hidden;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
    transition: width 0.1s ease-out;
}

/* 3D Visual Scene */
.about-visual-scene {
    padding: 0px 0;
    background: linear-gradient(180deg, #1e2736 0%, #7e8daf 100%);
    overflow: visible; /* Allow slider to display outside container */
    position: relative;
    width: 100%;
}

.scene-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 1200px;  /* 600px * 2 - 扩大一倍 */
    perspective: 1500px;
    transform-style: preserve-3d;
    overflow: visible;  /* 允许滑块条显示在容器外 */
}

.scene-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.scene-layer img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

.scene-layer video {
    display: block;
    max-width: 100%;
    height: auto;
    filter: none;  /* 视频不要阴影 */
    pointer-events: none;  /* 禁用所有交互，包括右键菜单 */
}

/* Background Layer - Fixed, no parallax, full width */
.scene-background {
    display: none;  /* 隐藏背景 */
    position: absolute;
    width: 100vw;
    height: 100%;
    max-width: none;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: hidden;
}

.scene-background img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Character Layer - Car driving animation with loop */
.scene-character {
    display: none;  /* 隐藏che */
    width: 90%;
    max-width: 1200px;
    z-index: 2;
    /* Start position: off-screen right */
    left: 150%;
    top: 50%;
    opacity: 0;
    transition: none;
}

.scene-character.active {
    animation: driveLoop 26s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes driveLoop {
    /* Wait 5 seconds */
    0%, 19.23% {
        left: 150%;
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(1);
    }

    /* Fade in and start driving right to left */
    20% {
        left: 150%;
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1);
    }

    /* Drive across to left */
    35% {
        left: -50%;
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1);
    }

    /* Fade out on left */
    36% {
        left: -50%;
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(1);
    }

    /* Wait and flip (now facing right) */
    36.5%, 57.69% {
        left: -50%;
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(-1);
    }

    /* Fade in and start driving left to right */
    58% {
        left: -50%;
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(-1);
    }

    /* Drive across to right */
    73% {
        left: 150%;
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(-1);
    }

    /* Fade out on right */
    74% {
        left: 150%;
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(-1);
    }

    /* Flip back to original direction */
    74.5%, 100% {
        left: 150%;
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(1);
    }
}

/* Main Character (Me) - 360 Viewer */
.scene-me {
    width: 120%;  /* 40% * 3 = 120% - 放大3倍 */
    max-width: 1800px;  /* 600px * 3 = 1800px */
    top: calc(58% - 125px);  /* 再往上5px */
    left: 50%;
    z-index: 5;
    padding-bottom: 100px;  /* 为滑块条留出空间 */
    overflow: visible;  /* Allow slider to display outside */
    /* No animation - stays in place */

    /* 四周边缘模糊效果 - 让视频更好地融入背景 */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-composite: intersect;
}

/* 360 Viewer Styles */
.viewer-360 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;  /* Allow slider to display outside */
}

.viewer-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.viewer-video {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.viewer-controls {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 25px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    width: 90%;
    max-width: 300px;
}

.viewer-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: grab;
}

.viewer-slider:active {
    cursor: grabbing;
}

.viewer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: grab;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    transition: box-shadow 0.2s ease;
}

.viewer-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}

.viewer-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: grab;
    border: none;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    transition: box-shadow 0.2s ease;
}

.viewer-slider::-moz-range-thumb:active {
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}

.viewer-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Floating Items - Base Styles */
.floating-item {
    animation: float 6s ease-in-out infinite;
}

.floating-item img {
    transition: transform 0.3s ease;
}

.floating-item:hover img {
    transform: scale(1.1) rotate(5deg);
}

@keyframes float {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0px);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-20px);
    }
}

/* Individual Item Positioning */
.scene-app {
    width: 20%;
    max-width: 250px;
    top: 45%;  /* 往上移 */
    left: 38%;  /* 再往左移 */
    z-index: 6;
    animation-delay: 0s;
}

.scene-drone {
    width: 15%;
    max-width: 200px;
    top: 15%;
    left: 70%;
    z-index: 6;
    /* Remove default float animation, use custom drone flight */
    animation: droneFlight 15s ease-in-out infinite;
}

@keyframes droneFlight {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
    }
    10% {
        transform: translate(-50%, -50%) translate(80px, -40px) rotate(5deg);
    }
    20% {
        transform: translate(-50%, -50%) translate(120px, 20px) rotate(-3deg);
    }
    30% {
        transform: translate(-50%, -50%) translate(60px, 60px) rotate(8deg);
    }
    40% {
        transform: translate(-50%, -50%) translate(-40px, 40px) rotate(-5deg);
    }
    50% {
        transform: translate(-50%, -50%) translate(-100px, -20px) rotate(6deg);
    }
    60% {
        transform: translate(-50%, -50%) translate(-80px, -60px) rotate(-4deg);
    }
    70% {
        transform: translate(-50%, -50%) translate(20px, -80px) rotate(7deg);
    }
    80% {
        transform: translate(-50%, -50%) translate(100px, -30px) rotate(-6deg);
    }
    90% {
        transform: translate(-50%, -50%) translate(40px, 30px) rotate(4deg);
    }
    100% {
        transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
    }
}

.scene-macbook {
    width: 20%;
    max-width: 250px;
    top: 65%;
    left: 20%;  /* 往左移 */
    z-index: 6;  /* 提升到视频上层 */
    animation-delay: 1s;
}

.scene-ps5 {
    width: 15%;  /* 从18%缩小到15% */
    max-width: 190px;  /* 从230px缩小到190px */
    top: 25%;  /* 往上移一点 */
    left: 18%;  /* 稍微往左 */
    z-index: 7;
    animation-delay: 1.5s;
}

.scene-xbox {
    width: 16%;
    max-width: 200px;
    top: 20%;
    left: 75%;
    z-index: 6;
    animation-delay: 2s;
}

.scene-switch {
    width: 17%;
    max-width: 220px;
    top: 60%;  /* 从70%往上移到60% */
    left: 55%;  /* 从65%往左移到55% */
    z-index: 6;  /* 提升到视频上层 */
    animation-delay: 2.5s;
}

.scene-shoe {
    width: 18%;
    max-width: 230px;
    top: 78%;  /* 往下移 */
    left: 78%;  /* 往右移 */
    z-index: 6;  /* 提升到视频上层 */
    /* Remove floating animation for shoe */
    animation: none;
}

/* Parallax Effect on Mouse Move */
@media (hover: hover) {
    .scene-container:hover .scene-layer {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* Responsive Design for Scene */
@media (max-width: 1200px) and (min-width: 769px) {
    .scene-container {
        height: 1000px;
    }

    .scene-me {
        width: 140%;  /* 保持较大尺寸，避免视频变小 */
        max-width: 2100px;
        top: calc(58% - 125px);
    }
}

@media (max-width: 768px) {
    .about-visual-scene {
        padding: 0px 0;
    }

    .scene-container {
        height: 80vh;  /* 增加高度到80%，确保视频完整显示 */
        min-height: 600px;
        max-height: 800px;
    }

    /* 等比放大所有元素 - 保持桌面版比例 */
    .scene-me {
        width: 180%;  /* 120% * 1.5 = 180% */
        max-width: 2700px;  /* 1800px * 1.5 */
        top: 50%;  /* 居中显示，确保上下都能看到 */
        padding-bottom: 60px;  /* 移动端减少 padding */
    }

    .viewer-controls {
        bottom: -50px !important;  /* 移动端滑块往上调 */
    }

    /* App - 视频正中偏左 */
    .scene-app {
        width: 28%;
        max-width: 350px;
        top: 45%;  /* 往上移 */
        left: 38%;  /* 再往左移 */
    }

    /* MacBook - 左下角 */
    .scene-macbook {
        width: 32%;  /* 稍微放大 */
        max-width: 400px;
        top: 65%;  /* 往上移，避免挡住滑块 */
        left: 8%;  /* 更靠左 */
    }

    /* PS5手柄 - 左上角，缩小 */
    .scene-ps5 {
        width: 25%;  /* 缩小手柄 */
        max-width: 320px;
        top: 8%;  /* 往上移，避免挡住脸 */
        left: 2%;  /* 往左移 */
    }

    /* Xbox手柄 - 右上角 */
    .scene-xbox {
        width: 26%;  /* 稍微放大 */
        max-width: 330px;
        top: 12%;  /* 保持在上方 */
        left: 78%;  /* 稍微往左移 */
    }

    /* Switch - 右中下 */
    .scene-switch {
        width: 28%;  /* 稍微放大 */
        max-width: 360px;
        top: 58%;  /* 往上移一点 */
        left: 68%;  /* 往左移，避免被裁切 */
    }

    /* 鞋子 - 右下角 */
    .scene-shoe {
        width: 30%;  /* 放大鞋子 */
        max-width: 380px;
        top: 75%;  /* 往上移，避免挡住滑块 */
        left: 75%;  /* 稍微往右 */
    }

    /* 无人机 - 右上角 */
    .scene-drone {
        width: 24%;  /* 稍微放大 */
        max-width: 320px;
        top: 8%;  /* 更靠上 */
        left: 72%;  /* 往左移，避免被裁切 */
    }

    /* Ensure background fills full screen width on mobile */
    .scene-background {
        width: 100vw;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .scene-background img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 480px) {
    .scene-container {
        height: 75vh;  /* 增加高度到75%，确保视频完整显示 */
        min-height: 550px;
        max-height: 700px;
    }

    /* 等比放大所有元素 - 保持桌面版比例 */
    .scene-me {
        width: 240%;  /* 120% * 2 = 240% */
        max-width: 3600px;  /* 1800px * 2 */
        top: 50%;  /* 居中显示，确保上下都能看到 */
    }

    /* App - 视频正中偏左 */
    .scene-app {
        width: 38%;
        max-width: 480px;
        top: 45%;  /* 往上移 */
        left: 38%;  /* 再往左移 */
    }

    /* MacBook - 左下角 */
    .scene-macbook {
        width: 42%;  /* 放大 */
        max-width: 530px;
        top: 62%;  /* 往上移，避免挡住滑块 */
        left: 5%;  /* 更靠左 */
    }

    /* PS5手柄 - 左上角，缩小 */
    .scene-ps5 {
        width: 33%;  /* 缩小手柄 */
        max-width: 420px;
        top: 5%;  /* 往上移，避免挡住脸 */
        left: 0%;  /* 往左移 */
    }

    /* Xbox手柄 - 右上角 */
    .scene-xbox {
        width: 35%;  /* 放大 */
        max-width: 440px;
        top: 10%;  /* 保持在上方 */
        left: 75%;  /* 往左移，避免被裁切 */
    }

    /* Switch - 显示在右中位置 */
    .scene-switch {
        width: 36%;  /* 放大 */
        max-width: 450px;
        top: 55%;  /* 中间偏下 */
        left: 65%;  /* 往左移，避免被裁切 */
    }

    /* 鞋子 - 右下角 */
    .scene-shoe {
        width: 38%;  /* 放大 */
        max-width: 480px;
        top: 75%;  /* 往上移，避免挡住滑块 */
        left: 70%;  /* 稍微往右 */
    }

    /* 无人机 - 右上角 */
    .scene-drone {
        width: 32%;  /* 放大 */
        max-width: 400px;
        top: 6%;  /* 更靠上 */
        left: 68%;  /* 往左移，避免被裁切 */
    }
}

/* About Hero Section with Parallax - Same as homepage */
.about-hero {
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
    /* Same parallax background as hero section */
    background:
        url('../images/backgrounds/hero-pattern.svg'),
        radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(102, 126, 234, 0.05) 0%, transparent 50%),
        linear-gradient(135deg,
            #faf7ff 0%,
            #f3f0ff 25%,
            #e9e5ff 50%,
            #d6d3f0 75%,
            #c4c1e0 100%);
    background-size: 200px 200px, cover, cover, cover, cover;
    background-attachment: fixed;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.about-intro {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    text-align: center;
}

.about-description {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 2rem;
    text-align: center;
}

.profile-read-btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.profile-read-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}

/* Personal Story Section */
.personal-story {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    background: #0f172a;
}

.personal-story::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover, 600px;
    background-position: center, center;
    background-repeat: no-repeat, repeat;
    background-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.personal-story-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.5;
}

.personal-story .container {
    position: relative;
    z-index: 2;
}

.story-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #f8f9fa;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.story-timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

/* Vertical timeline line */
.story-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        var(--primary-color) 0%,
        #4ecdc4 50%,
        var(--primary-color) 100%);
    transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}

.story-chapter {
    position: relative;
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.story-chapter:nth-child(odd) {
    flex-direction: row;
}

.story-chapter:nth-child(even) {
    flex-direction: row-reverse;
}

.chapter-year {
    flex: 0 0 140px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    background: white;
    padding: 1rem;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    border: 4px solid var(--primary-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.2;
}

.story-chapter:hover .chapter-year {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.3);
}

.chapter-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.chapter-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        #4ecdc4 50%,
        #667eea 100%);
    border-radius: 20px 20px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.chapter-content::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.story-chapter:hover .chapter-content::before {
    transform: scaleX(1);
}

.story-chapter:hover .chapter-content {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 0 1px rgba(255, 107, 53, 0.2);
    border-color: rgba(255, 107, 53, 0.3);
}

.story-chapter:hover .chapter-content::after {
    opacity: 1;
}

.chapter-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
    width: 80px;
    height: 80px;
}

.chapter-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.chapter-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.chapter-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-light);
}

/* Philosophy Section */
.philosophy-section {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.philosophy-section .container {
    max-width: 1200px;
}

.philosophy-title {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
}

.philosophy-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #4ecdc4);
    border-radius: 2px;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.philosophy-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.philosophy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.philosophy-number {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 107, 53, 0.15);
    line-height: 1;
    margin-bottom: 1rem;
}

.philosophy-card-title {
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.philosophy-card-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-light);
}

/* Service Combinations Section */
.service-combinations {
    padding: 5rem 0;
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.service-combinations .container {
    max-width: 1200px;
}

.service-combinations h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--text-color);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.service-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.service-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-card:hover .service-icon {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.15));
}

.service-card h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-list li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
}

.service-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}


/* Achievements Section */
.achievements-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.achievements-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/backgrounds/hero-pattern.svg');
    opacity: 0.1;
    pointer-events: none;
}

.achievements-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.achievements-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* For exactly 6 items, create 2 rows of 3 */
@media (min-width: 769px) {
    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet: 2 columns */
@media (max-width: 768px) and (min-width: 481px) {
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
}

.achievement-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 249, 250, 0.95) 100%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        #4ecdc4 50%,
        #667eea 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-card::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(78, 205, 196, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.achievement-card:hover::before {
    transform: scaleX(1);
}

.achievement-card:hover::after {
    opacity: 1;
}

.achievement-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(248, 249, 250, 1) 100%);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 0 1px rgba(255, 107, 53, 0.2);
    border-color: rgba(255, 107, 53, 0.4);
}

.achievement-card:hover .achievement-number {
    color: #4ecdc4;
}

.achievement-card:hover .achievement-icon {
    transform: scale(1.2) rotate(5deg);
}

.achievement-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
}

.achievement-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.achievement-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1;
    font-family: 'Inter', sans-serif;
}

.achievement-number .counter {
    display: inline-block;
    min-width: 2ch;
}

.achievement-number .prefix,
.achievement-number .suffix {
    color: var(--primary-color);
    font-size: 2rem;
}

.achievement-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.achievement-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0;
}

.achievement-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    filter: blur(3px);
}

/* Value Proposition Section */
.value-proposition {
    padding: 4rem 0;
    background: #f8f9fa url('../images/backgrounds/bk02.png') center center / cover no-repeat;
    background-attachment: fixed;
    position: relative;
}

.value-proposition::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.85);
    z-index: 1;
}

.value-proposition .container {
    position: relative;
    z-index: 2;
}

.value-proposition h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: var(--text-color);
}

.value-item small {
    display: block;
    color: var(--text-light);
    margin-top: 6px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.value-item {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    padding: 2.5rem;
    border-radius: 16px;
    text-align: left;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 107, 53, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.value-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        #4ecdc4 50%,
        #667eea 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.value-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.1), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.value-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(255, 107, 53, 0.3);
}

.value-item:hover::before {
    transform: scaleX(1);
}

.value-item:hover::after {
    width: 300px;
    height: 300px;
}

.value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.value-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.value-item:hover .value-icon {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.15));
}

.value-item h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    font-weight: 600;
    line-height: 1.4;
}

.value-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* 3D Skills Decorations */
.skills-3d-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.skill-3d-element {
    position: absolute;
    perspective: 1000px;
    animation: skillFloat3D 12s ease-in-out infinite;
}

.skill-design-3d {
    top: 10%;
    right: 5%;
    animation-delay: 0s;
}

.skill-3d-modeling {
    top: 30%;
    left: 2%;
    animation-delay: -3s;
}

.skill-media-3d {
    bottom: 30%;
    right: 8%;
    animation-delay: -6s;
}

.skill-dev-3d {
    bottom: 10%;
    left: 5%;
    animation-delay: -9s;
}

@keyframes skillFloat3D {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotateZ(0deg);
    }
    25% {
        transform: translateY(-15px) translateX(8px) rotateZ(3deg);
    }
    50% {
        transform: translateY(-8px) translateX(-5px) rotateZ(-2deg);
    }
    75% {
        transform: translateY(-20px) translateX(6px) rotateZ(4deg);
    }
}

/* Design Tool 3D */
.design-tool-3d {
    width: 35px;
    height: 35px;
    transform-style: preserve-3d;
    animation: rotateDesignTool 8s linear infinite;
}

.tool-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.tool-face {
    position: absolute;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tool-front { background: rgba(102, 126, 234, 0.8); transform: rotateY(0deg) translateZ(17.5px); }
.tool-back { background: rgba(255, 107, 53, 0.8); transform: rotateY(180deg) translateZ(17.5px); }
.tool-right { background: rgba(78, 205, 196, 0.8); transform: rotateY(90deg) translateZ(17.5px); }
.tool-left { background: rgba(240, 147, 251, 0.8); transform: rotateY(-90deg) translateZ(17.5px); }
.tool-top { background: rgba(79, 172, 254, 0.8); transform: rotateX(90deg) translateZ(17.5px); }
.tool-bottom { background: rgba(245, 87, 108, 0.8); transform: rotateX(-90deg) translateZ(17.5px); }

@keyframes rotateDesignTool {
    0% { transform: rotateX(0) rotateY(0); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 3D Modeling Sphere */
.modeling-sphere-3d {
    width: 40px;
    height: 40px;
    transform-style: preserve-3d;
    animation: rotateSphere 10s linear infinite;
}

.sphere-wireframe {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.wire-ring {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0.8;
}

.wire-x { border-color: rgba(102, 126, 234, 0.8); transform: rotateX(0deg); }
.wire-y { border-color: rgba(255, 107, 53, 0.8); transform: rotateY(90deg); }
.wire-z { border-color: rgba(78, 205, 196, 0.8); transform: rotateZ(90deg); }

@keyframes rotateSphere {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* Media Pyramid */
.media-pyramid-3d {
    width: 30px;
    height: 30px;
    transform-style: preserve-3d;
    animation: rotateMediaPyramid 9s linear infinite;
}

.media-face {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.media-1 {
    border-width: 0 15px 25px 15px;
    border-color: transparent transparent rgba(255, 107, 53, 0.8) transparent;
    transform: rotateY(0deg) translateZ(8px);
}

.media-2 {
    border-width: 0 15px 25px 15px;
    border-color: transparent transparent rgba(102, 126, 234, 0.8) transparent;
    transform: rotateY(90deg) translateZ(8px);
}

.media-3 {
    border-width: 0 15px 25px 15px;
    border-color: transparent transparent rgba(78, 205, 196, 0.8) transparent;
    transform: rotateY(180deg) translateZ(8px);
}

.media-4 {
    border-width: 0 15px 25px 15px;
    border-color: transparent transparent rgba(240, 147, 251, 0.8) transparent;
    transform: rotateY(270deg) translateZ(8px);
}

@keyframes rotateMediaPyramid {
    0% { transform: rotateX(0) rotateY(0); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* Development Hexagon */
.dev-hexagon-3d {
    width: 35px;
    height: 35px;
    transform-style: preserve-3d;
    animation: rotateDevHex 11s linear infinite;
}

.hex-face {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(102, 126, 234, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hex-1 { background: rgba(255, 107, 53, 0.8); transform: rotateY(0deg) translateZ(10px); }
.hex-2 { background: rgba(102, 126, 234, 0.8); transform: rotateY(60deg) translateZ(10px); }
.hex-3 { background: rgba(78, 205, 196, 0.8); transform: rotateY(120deg) translateZ(10px); }
.hex-4 { background: rgba(240, 147, 251, 0.8); transform: rotateY(180deg) translateZ(10px); }
.hex-5 { background: rgba(79, 172, 254, 0.8); transform: rotateY(240deg) translateZ(10px); }
.hex-6 { background: rgba(245, 87, 108, 0.8); transform: rotateY(300deg) translateZ(10px); }

@keyframes rotateDevHex {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .about-intro {
        font-size: 2rem;
    }

    .about-description {
        font-size: 1.125rem;
    }

    .profile-read-btn {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .philosophy-title {
        font-size: 2rem;
    }

    .philosophy-card {
        padding: 1.5rem;
    }

    .philosophy-number {
        font-size: 2.5rem;
    }

    .philosophy-card-title {
        font-size: 1.1rem;
    }

    .skills-categories {
        grid-template-columns: 1fr;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    /* Personal Story Mobile */
    .story-title {
        font-size: 2rem;
        margin-bottom: 3rem;
    }

    .story-timeline::before {
        left: 60px;
    }

    .story-chapter {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 0;
        margin-bottom: 3rem;
    }

    .story-chapter:nth-child(even) {
        flex-direction: column !important;
    }

    .chapter-year {
        width: 100px;
        height: 100px;
        font-size: 1.25rem;
        flex: 0 0 100px;
        margin-left: 10px;
    }

    .chapter-content {
        width: 100%;
        margin-left: 0;
        padding: 2rem;
    }

    .chapter-icon {
        font-size: 2.5rem;
        width: 65px;
        height: 65px;
    }

    .chapter-title {
        font-size: 1.25rem;
    }

    .chapter-text {
        font-size: 1rem;
    }

    /* Skill Progress Mobile */
    .skill-category-detailed {
        padding: 2rem;
    }

    .skill-item {
        padding: 0.875rem 0;
    }

    .skill-name {
        font-size: 0.9375rem;
    }

    .skill-percentage {
        font-size: 0.8125rem;
    }

    .skill-progress-bar {
        height: 6px;
    }

    /* Achievements Mobile */
    .achievements-title {
        font-size: 2rem;
        margin-bottom: 3rem;
    }

    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .achievement-card {
        padding: 2rem 1.5rem;
    }

    .achievement-icon {
        font-size: 3rem;
        width: 70px;
        height: 70px;
    }

    .achievement-number {
        font-size: 2.5rem;
    }

    .achievement-number .prefix,
    .achievement-number .suffix {
        font-size: 1.75rem;
    }

    .achievement-label {
        font-size: 0.9375rem;
    }

    .value-grid {
        grid-template-columns: 1fr;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile & Tablet: Auto-show hover effect when card is in viewport */
    .story-chapter.in-viewport .chapter-year {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 15px 40px rgba(255, 107, 53, 0.3);
    }

    .story-chapter.in-viewport .chapter-content::before {
        transform: scaleX(1);
    }

    .story-chapter.in-viewport .chapter-content {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        border-color: var(--primary-color);
    }

    .achievement-card.in-viewport {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        border-color: var(--primary-color);
    }

    .achievement-card.in-viewport::before {
        transform: scaleX(1);
    }

    .achievement-card.in-viewport .achievement-icon {
        transform: scale(1.2) rotate(5deg);
    }

    .achievement-card.in-viewport .achievement-number {
        color: #4ecdc4;
    }

    /* Skill category cards auto-hover effect */
    .skill-category-detailed.in-viewport {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        border-color: var(--primary-color);
    }

    .skill-category-detailed.in-viewport::before {
        opacity: 0.8;
        transform: translateZ(30px) scale(1);
    }

    /* Value items auto-hover effect */
    .value-item.in-viewport {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }
}

/* Refactored from inline styles */
.navbar-logo {
    height: 60px;
    width: auto;
}

.about-avatar {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.about-avatar::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        #4ecdc4 25%,
        #667eea 50%,
        #f093fb 75%,
        var(--primary-color) 100%);
    background-size: 300% 300%;
    animation: gradientRotate 4s ease infinite;
    opacity: 0.6;
    filter: blur(15px);
    z-index: -1;
}

.about-avatar::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--primary-color),
        #4ecdc4,
        #667eea);
    background-size: 200% 200%;
    animation: gradientRotate 3s ease infinite;
    z-index: -1;
}

.about-avatar-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    border: 4px solid #fff;
}

.about-avatar:hover .about-avatar-img {
    transform: scale(1.05) rotate(5deg);
}

@keyframes gradientRotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Scroll Animation Enhancements */
.achievement-card,
.value-item,
.story-chapter,
.skill-category-detailed {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.achievement-card.in-viewport,
.value-item.in-viewport,
.story-chapter.in-viewport,
.skill-category-detailed.in-viewport {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for grid items */
.achievement-card:nth-child(1) { transition-delay: 0.1s; }
.achievement-card:nth-child(2) { transition-delay: 0.2s; }
.achievement-card:nth-child(3) { transition-delay: 0.3s; }
.achievement-card:nth-child(4) { transition-delay: 0.4s; }
.achievement-card:nth-child(5) { transition-delay: 0.5s; }
.achievement-card:nth-child(6) { transition-delay: 0.6s; }

.value-item:nth-child(1) { transition-delay: 0.1s; }
.value-item:nth-child(2) { transition-delay: 0.2s; }
.value-item:nth-child(3) { transition-delay: 0.3s; }
.value-item:nth-child(4) { transition-delay: 0.4s; }
.value-item:nth-child(5) { transition-delay: 0.5s; }

/* Pulse animation for achievement numbers */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.achievement-number.counting {
    animation: pulse 0.5s ease;
}

.footer-legal-links .legal-link-disabled {
    color: var(--text-light);
    opacity: 0.7;
    cursor: not-allowed;
}