/* ---------- Base ---------- */
body {
    background-color: #0B0B0D;
    color: #F4F5F7;
    letter-spacing: 0.03em;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: #5AA8FF;
    color: #ffffff;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0B0B0D; }
::-webkit-scrollbar-thumb { background: #5AA8FF; border-radius: 10px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-nav {
    background: rgba(11, 11, 13, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ---------- Cards ---------- */
.editorial-card {
    background-color: #1C1F24;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 2.25rem;
    border-radius: 1.5rem;
    transition: transform 0.4s cubic-bezier(.19,1,.22,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.editorial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -18px rgba(90, 168, 255, 0.25);
    border-color: rgba(90, 168, 255, 0.5);
}

/* Ecosystem pillar cards: borderless, top-line accent (matches chloeceyi.com's ecosystem section) */
.pillar-card {
    padding-top: 1.5rem;
    border-top: 2px solid rgba(255,255,255,0.08);
    transition: border-color 0.5s ease;
}
.pillar-card:hover { border-top-color: #5AA8FF; }
.pillar-card.pillar-active { border-top-color: #F4F5F7; }

/* ---------- Buttons (pill shape, sliding accent fill on hover) ---------- */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9999px;
    background-color: #F4F5F7;
    color: #0B0B0D;
    transition: box-shadow 0.4s ease;
}
.btn-primary .btn-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background-color: #5AA8FF;
    transition: width 0.4s cubic-bezier(.19,1,.22,1);
}
.btn-primary:hover .btn-fill { width: 100%; }
.btn-primary:hover { box-shadow: 0 16px 40px -12px rgba(90, 168, 255, 0.55); }
.btn-primary:hover .btn-label { color: #ffffff; }
.btn-primary .btn-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.3s ease; }

.btn-outline {
    border-radius: 9999px;
    transition: transform 0.3s cubic-bezier(.19,1,.22,1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-outline:hover {
    background-color: #F4F5F7;
    color: #0B0B0D;
    border-color: #F4F5F7;
}

/* ---------- Images ---------- */
.img-editorial {
    border-radius: 1.5rem;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.19,1,.22,1);
    filter: grayscale(6%) contrast(103%) brightness(0.94);
}
.img-container:hover .img-editorial { transform: scale(1.06); }

.mockup-placeholder {
    background: linear-gradient(135deg, #1C1D21, #0E0F11);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
}

/* ---------- Hero headline emphasis: italic Latin by default, switches to a ---------- */
/* serif CJK face (no italic) once the page is in Chinese, since forcing an  */
/* italic slant on Han characters looks broken rather than elegant.          */
.hero-emphasis {
    font-style: italic;
    color: #5AA8FF;
}
html[lang="zh-CN"] .hero-emphasis {
    font-style: normal;
    font-family: "Noto Serif SC", serif;
}
html[lang="zh-CN"] .hero-subtitle {
    color: rgba(244, 245, 247, 0.82);
}

/* ---------- Decorative outlined numerals (matches chloeceyi.com's chapter numbers) ---------- */
.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px #C0C3C7;
}

/* ---------- Nav / lang toggle ---------- */
.lang-toggle {
    border: 1px solid rgba(244, 245, 247, 0.3);
    color: #F4F5F7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 6px 12px;
    border-radius: 9999px;
    transition: border-color 0.2s, color 0.2s;
}
.lang-toggle:hover { border-color: #5AA8FF; color: #8CC8FF; }

/* ---------- Trusted-by marquee ---------- */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Trust badges ---------- */
.trust-badge {
    border-radius: 1.5rem;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.trust-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px -18px rgba(90, 168, 255, 0.25);
    border-color: rgba(90, 168, 255, 0.5);
}

/* ---------- Case category tabs ---------- */
.case-tab {
    padding: 10px 22px;
    border-radius: 9999px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(255,255,255,0.08);
    background: #1C1F24;
    color: #F4F5F7;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.case-tab:hover { border-color: #5AA8FF; }
.case-tab.active { background: #F4F5F7; color: #0B0B0D; border-color: #F4F5F7; }

/* ---------- Services accordion ---------- */
.accordion-service {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0;
}
.accordion-service summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accordion-service summary::-webkit-details-marker { display: none; }
.accordion-service summary::after {
    content: '+';
    font-size: 28px;
    font-weight: 300;
    color: #5AA8FF;
}
.accordion-service[open] summary::after { content: '\2212'; }
.accordion-service-body { padding-bottom: 12px; }

/* ---------- Music toggle ---------- */
#musicToggle {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: #F4F5F7;
    color: #0B0B0D;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
    cursor: pointer;
    border: none;
    transition: transform .3s cubic-bezier(.19,1,.22,1), background-color .3s ease, color .3s ease;
}
#musicToggle:hover { background: #5AA8FF; color: #ffffff; transform: scale(1.08); }
#musicToggle i { transition: transform .3s ease; }
#musicToggle.playing i.fa-music { animation: musicPulse 1.4s ease-in-out infinite; }
@keyframes musicPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---------- Glow cards (Digital page service grid) ---------- */
.glow-card {
    background: #1C1F24;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem;
    padding: 1.75rem;
    transition: transform 0.45s cubic-bezier(.19,1,.22,1), box-shadow 0.45s ease, border-color 0.45s ease;
}
.glow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px -20px rgba(90, 168, 255, 0.4);
    border-color: rgba(90, 168, 255, 0.55);
}

/* ---------- Before/After flow visual (Digital page) ---------- */
.flow-chaos-tag {
    display: inline-block;
    background: #1C1F24;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    color: rgba(244,245,247,0.5);
    transform: rotate(var(--r, 0deg));
}
.flow-connector {
    stroke: #5AA8FF;
    stroke-width: 2;
    stroke-dasharray: 6 6;
    fill: none;
    animation: flow-dash 2.4s linear infinite;
}
@keyframes flow-dash { to { stroke-dashoffset: -48; } }
.flow-node {
    transition: transform 0.4s ease;
}
.flow-node:hover { transform: scale(1.08); }

/* ---------- Premium flow diagram v2 (Digital page "After" panel) ---------- */
.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.flow-orb {
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, #202126, #1C1F24);
    box-shadow: 0 14px 34px -10px rgba(90, 168, 255, 0.4);
    font-size: 22px;
    color: #F4F5F7;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.4s cubic-bezier(.19,1,.22,1);
}
.flow-orb-dark { background: radial-gradient(circle at 35% 30%, #141619, #050506); color: #F4F5F7; border-color: rgba(255,255,255,0.08); }
.flow-orb-accent { background: radial-gradient(circle at 35% 30%, #8CC8FF, #5AA8FF); color: #ffffff; border-color: #5AA8FF; }
.flow-step:hover .flow-orb { transform: scale(1.1) translateY(-2px); }
.flow-step-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(244,245,247,0.55); font-weight: 600; }
.flow-line-wrap {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
    margin: 0 6px;
    margin-top: -26px;
}
.flow-line-progress {
    position: absolute;
    inset: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, #5AA8FF, transparent);
    animation: flow-travel 2.6s ease-in-out infinite;
}
@keyframes flow-travel {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(280%); }
}

/* ---------- Efficiency slider (Digital page) ---------- */
.efficiency-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    outline: none;
}
.efficiency-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #F4F5F7;
    border: 3px solid #5AA8FF;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.efficiency-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.efficiency-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #F4F5F7;
    border: 3px solid #5AA8FF;
    cursor: pointer;
}

/* ---------- Role bento cards (Partners page) ---------- */
.role-card {
    position: relative;
    background: #1C1F24;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.5rem;
    padding: 2rem;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(.19,1,.22,1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.role-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(90,168,255,0.22), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.role-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 30px 70px -24px rgba(90, 168, 255, 0.45);
    border-color: rgba(90, 168, 255, 0.55);
}
.role-card:hover::before { opacity: 1; }
.role-card .role-arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.role-card:hover .role-arrow {
    opacity: 1;
    transform: translateX(0);
}
.role-icon-orb {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, #202126, #1C1F24);
    position: relative;
    z-index: 1;
}

/* ---------- Contact modal ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-card {
    background: #0B0B0D;
    border-radius: 24px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.modal-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.modal-link:hover { border-color: #5AA8FF; background: #1C1F24; }

/* ---------- Scroll reveal (timing matches chloeceyi.com's .reveal system) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform, opacity;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}