/* Ensure hidden attribute always hides even when flex/grid classes are present */
[hidden] {
    display: none !important;
}

/* Все стили из тега <style> исходного файла */
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.page {
    display: none;
    animation: fadeIn 0.5s ease both;
}
.page.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}
.faq-item.open .faq-content {
    max-height: 320px;
    opacity: 1;
}
.faq-item.open .faq-btn {
    transform: rotate(45deg);
}
.login-step {
    display: none;
}
.login-step.active {
    display: block;
    animation: fadeIn 0.35s ease;
}
.tab-btn.active {
    background-color: #7c3aed;
    color: white;
}
.nav-link.active {
    color: #7c3aed;
    background-color: #f5f3ff;
}
.jp-accent {
    font-family: 'Noto Sans JP', sans-serif;
}
.guide-toc {
    background: #fafafa;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
}
.guide-toc a {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    color: #4b5563;
    border-bottom: 1px solid #f1f1f1;
    text-decoration: none;
}
.guide-toc a:hover {
    color: #7c3aed;
}
.guide-toc a:last-child {
    border-bottom: none;
}
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #1f2937;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transform: translateY(120%);
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    z-index: 9999;
    max-width: 400px;
    font-size: 0.9rem;
    font-weight: 500;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}
.toast.success {
    background: #065f46;
}
.toast.error {
    background: #991b1b;
}
.form-input.error {
    border-color: #dc2626;
    background-color: #fef2f2;
}
.form-error-msg {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: none;
}
.form-error-msg.show {
    display: block;
}
.brand-mark {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.22);
}
.hero-orbit-ring { animation: orbitSpin 22s linear infinite; transform-origin: center; }
.hero-card-a { animation: floatCard 5s ease-in-out infinite; }
.hero-card-b { animation: floatCard 5.8s ease-in-out -1.8s infinite; }
.hero-card-c { animation: floatCard 5.2s ease-in-out -3s infinite; }


.hero-legacy-stack { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 1rem; 
}


.hero-workspace-visual { max-width: 430px; }
.hero-art-document, .hero-art-channel, .hero-art-board, .hero-art-note { position: absolute; border: 1px solid rgba(196,181,253,.75); background: rgba(255,255,255,.9); box-shadow: 0 14px 28px rgba(76,29,149,.09); }
.hero-art-document { top: 35px; left: 26px; width: 150px; padding: 14px; border-radius: 14px 14px 14px 4px; }.hero-art-document::after { content: ''; position: absolute; right: 0; top: 0; width: 24px; height: 24px; border-radius: 0 12px 0 10px; border-left: 1px solid #c4b5fd; border-bottom: 1px solid #c4b5fd; background: #f5f3ff; }.hero-art-row { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 6px; background: #faf5ff; }.hero-art-row span { display:block; height:16px; width:16px; border-radius:4px; background:#ddd6fe; }.hero-art-row i { display: block; height: 4px; width: 48px; border-radius: 4px; background: #c4b5fd; }.hero-art-row b { display:block; height: 5px; width: 5px; border-radius:50%; background:#8b5cf6; }
.hero-art-channel { top: 50px; right: 28px; width: 157px; padding: 11px; border-radius: 15px; }.hero-art-video { position:relative; height: 66px; overflow:hidden; border-radius: 10px; background: linear-gradient(145deg,#3730a3,#8b5cf6 55%,#c4b5fd); }.hero-art-video::before { content:''; position:absolute; bottom:-18px; left:-8px; width:110%; height:44px; border-radius:50% 50% 0 0; background:#4338ca; opacity:.62; }.hero-art-moon { position:absolute; top:11px; right:20px; height:20px; width:20px; border-radius:50%; background:#ede9fe; opacity:.8; }.hero-art-play { position:absolute; z-index:1; top:20px; left:63px; color:#fff; font-size:18px; }
.hero-art-board { bottom: 10px; left: 83px; display:flex; gap:10px; width:290px; padding:10px; border-radius:15px; }.hero-art-board-video { position:relative; display:flex; width:104px; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; background:linear-gradient(145deg,#a78bfa,#4f46e5); color:#fff; font-size:22px; }.hero-art-board-video div { position:absolute; right:10px; bottom:9px; left:10px; height:3px; border-radius:3px; background:#fff; opacity:.75; }.hero-art-board-list { flex:1; display:grid; gap:5px; }.hero-art-board-list > div { display:flex; align-items:center; gap:6px; padding:4px 5px; border-radius:6px; background:#faf5ff; }.hero-art-board-list span { height:12px; width:12px; border-radius:4px; background:#c4b5fd; }.hero-art-board-list i { height:4px; flex:1; border-radius:4px; background:#ddd6fe; }.hero-art-board-list b { display:flex; height:13px; width:13px; align-items:center; justify-content:center; border-radius:50%; background:#d1fae5; color:#059669; font-size:8px; }
.hero-art-note { right: 5px; bottom: 55px; display:flex; gap:5px; width:73px; padding:9px; border-radius:10px; background:#fff7ed; border-color:#fed7aa; }.hero-art-note span { color:#f97316; }.hero-art-note i { display:block; height:4px; width:17px; margin-top:5px; border-radius:3px; background:#fdba74; }
.hero-connection-lines { opacity: .72; }
.hero-dot-grid { position: absolute; right: 27px; top: 82px; width: 54px; height: 66px; opacity: .55; background-image: radial-gradient(#c4b5fd 1.2px, transparent 1.2px); background-size: 11px 11px; }
.hero-live-badge { animation: badgeFloat 4.5s ease-in-out infinite; }
.hero-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 0 0 rgba(139,92,246,.35); animation: livePing 2.2s ease-out infinite; }
.hero-comment-card { animation: floatCard 5.4s ease-in-out -2.2s infinite; }
.hero-metric-card { animation: floatCard 6s ease-in-out -1.1s infinite; }
.campaign-preview { animation: previewLift 6s ease-in-out infinite; }
.video-scene { background: #ede9fe; }
.video-scene svg { transition: transform .5s ease, filter .5s ease; }
.video-scene:hover svg { transform: scale(1.035); filter: saturate(1.08); }
.preview-play { animation: playPulse 2.8s ease-in-out infinite; }
.preview-progress { animation: progressGlow 3.6s ease-in-out infinite; transform-origin: left; }
.preview-pill { animation: pillPulse 3s ease-in-out infinite; }
.preview-pill:nth-child(2) { animation-delay: .45s; }
.preview-pill:nth-child(3) { animation-delay: .9s; }
#login-step1-left { position: relative; }
#login-step1-left > svg { width: 100%; height: 154px; margin-bottom: 1.5rem; padding: 22px 64px; border: 1px solid rgba(221,214,254,.9); border-radius: 1.25rem; background: radial-gradient(circle at 50% 50%, rgba(221,214,254,.8), transparent 36%), linear-gradient(135deg, rgba(255,255,255,.75), rgba(237,233,254,.76)); }
#login-step1-left::before { content: ''; position: absolute; top: 137px; left: 8%; width: 84%; height: 2px; background: linear-gradient(90deg, transparent, #8b5cf6, transparent); box-shadow: 0 0 16px rgba(124,58,237,.7); animation: scanChannel 3.5s ease-in-out infinite; pointer-events: none; }
#login-step1-left::after { content: 'PUBLIC CHANNEL  ·  READ ONLY'; position: absolute; top: 214px; right: 28px; padding: 4px 8px; border: 1px solid #ddd6fe; border-radius: 999px; background: rgba(255,255,255,.9); color: #7c3aed; font-size: 9px; font-weight: 700; letter-spacing: .08em; animation: scanStatus 1.8s ease-in-out infinite; pointer-events: none; }
#login-step1-left > svg circle:nth-child(1) { animation: scanOrbit 6s linear infinite; transform-origin: center; }
#login-step1-left > svg circle:nth-child(2) { animation: playPulse 2.4s ease-in-out infinite; transform-origin: center; }
.login-orbit-art { padding: 0 !important; border: 0 !important; background: transparent !important; }
.login-onboarding-panel { background: linear-gradient(145deg,#f1efff 0%,#f7f5ff 52%,#ede9fe 100%); }
.login-lookup-badge { position:absolute; z-index:2; top:274px; right:8px; display:flex; align-items:center; gap:8px; border:1px solid #e9e5ff; border-radius:13px; background:rgba(255,255,255,.94); padding:9px 12px; box-shadow:0 10px 22px rgba(76,29,149,.08); }.login-lookup-badge span { width:8px; height:8px; border-radius:50%; background:#34a77a; }.login-lookup-badge strong,.login-lookup-badge small { display:block; line-height:1.25; }.login-lookup-badge strong { font-size:10px; color:#334155; }.login-lookup-badge small { margin-top:2px; font-size:9px; color:#94a3b8; }
#login-step1-left .space-y-3 > div:nth-child(1) { background:#fff; } #login-step1-left .space-y-3 > div:nth-child(2) { background:#ecfdf5; border-color:#d1fae5; } #login-step1-left .space-y-3 > div:nth-child(3) { background:#fffbeb; border-color:#fef3c7; }
@keyframes scanChannel { 0%, 100% { transform: translateY(15px); opacity: .2; } 50% { transform: translateY(136px); opacity: 1; } }
@keyframes scanOrbit { to { transform: rotate(360deg); } }
@keyframes scanStatus { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,.38); } 70%, 100% { box-shadow: 0 0 0 6px rgba(139,92,246,0); } }
@keyframes previewLift { 0%, 100% { transform: translateY(0); box-shadow: 0 1px 2px rgba(15,23,42,.04); } 50% { transform: translateY(-7px); box-shadow: 0 18px 35px rgba(124,58,237,.10); } }
@keyframes playPulse { 0%, 100% { transform: scale(1); opacity: .72; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes progressGlow { 0%, 100% { filter: brightness(1); transform: scaleX(.82); } 50% { filter: brightness(1.2); transform: scaleX(1); } }
@keyframes pillPulse { 0%, 100% { border-color: #f1f5f9; background: #f8fafc; } 50% { border-color: #ddd6fe; background: #faf5ff; color: #7c3aed; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media (max-width: 640px) {
    .hero-comment-card { right: 1rem; bottom: 1rem; }
    .hero-metric-card { left: 1rem; bottom: 1rem; }
    .hero-live-badge { top: 1rem; left: 1rem; }
    .hero-dot-grid { display: none; }
    .hero-workspace-visual { transform: scale(.86); transform-origin: center; margin: -24px -24px; width: calc(100% + 48px); }
    #login-step1-left::after { right: 18px; }
    .login-lookup-badge { right: 0; }
}
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    z-index: 49;
    padding: 1.5rem 1.5rem 2rem;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}
.mobile-menu.open {
    display: block;
    animation: fadeIn 0.3s ease;
}
.mobile-menu a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}
.mobile-menu a:last-child {
    border-bottom: none;
}
.mobile-menu a:hover {
    color: #7c3aed;
}
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1e293b;
    transition: all 0.3s ease;
    border-radius: 2px;
}
.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
}
.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .desktop-nav { display: none !important; }
}
.screenshot-placeholder {
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-radius: 1.5rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.screenshot-placeholder:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}
.testimonial-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    border-color: #ddd6fe;
    box-shadow: 0 8px 24px rgba(124,58,237,0.06);
}
.pricing-card {
    border-radius: 2rem;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
    background: white;
    transition: all 0.3s ease;
}
.pricing-card:hover {
    border-color: #7c3aed;
    box-shadow: 0 20px 40px rgba(124,58,237,0.08);
}
.pricing-card.popular {
    border-color: #7c3aed;
    background: linear-gradient(145deg, #faf5ff, #f5f3ff);
    position: relative;
}
.pricing-card.popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #7c3aed;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 1.5rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
}
.focus-ring:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.cta-floating {
    transition: all 0.3s ease;
}
.cta-floating:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(124,58,237,0.25);
}
/* Language selector */
.lang-selector {
    position: relative;
    display: inline-block;
}
.lang-selector button {
    background: transparent;
    border: 1px solid #e2e8f0;
    padding: 0.4rem 1rem 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.lang-selector button:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.lang-selector .dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    min-width: 130px;
    z-index: 60;
    overflow: hidden;
}
.lang-selector .dropdown.open {
    display: block;
    animation: fadeIn 0.2s ease;
}
.lang-selector .dropdown a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #1e293b;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}
.lang-selector .dropdown a:hover {
    background: #f1f5f9;
}
.lang-selector .dropdown a.active {
    background: #f5f3ff;
    color: #7c3aed;
    font-weight: 600;
}
.lang-selector .dropdown a .code {
    font-weight: 700;
    margin-right: 0.3rem;
}

/* Стили для страниц About и Careers */
#page-about .bg-violet-50,
#page-careers .bg-violet-50 {
    background: linear-gradient(145deg, #faf5ff, #f5f3ff);
}

#page-about .rounded-2xl,
#page-careers .rounded-2xl {
    transition: all 0.3s ease;
}

#page-about .rounded-2xl:hover,
#page-careers .rounded-2xl:hover {
    transform: translateY(-2px);
}

/* Стили для блока статуса найма */
#page-careers .bg-amber-50 {
    background: linear-gradient(145deg, #fffbeb, #fef3c7);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
    #page-about .grid,
    #page-careers .grid {
        gap: 2rem;
    }
    
    #page-careers .bg-violet-700 {
        padding: 2rem;
    }
}

/* Small screens: keep the fixed header compact and leave the primary action in the mobile menu. */
@media (max-width: 520px) {
    nav .max-w-6xl { padding-left: 1rem; padding-right: 1rem; }
    nav .max-w-6xl > div:first-child { gap: 0; }
    nav .jp-accent,
    nav .nav-connect { display: none; }
    nav .max-w-6xl > div:last-child { gap: 0.75rem; }
    .mobile-menu { padding-left: 1rem; padding-right: 1rem; }
    #page-login .p-10 { padding: 1.5rem; }
    #page-login .login-tab { font-size: 0.78rem; }
}

/* Google account mismatch screen */
.mismatch-aside {
    background: radial-gradient(circle at 50% 30%, #ede9fe 0, #f5f3ff 35%, #fafafa 72%);
}
.mismatch-orbit {
    position: relative;
    width: 190px;
    height: 190px;
    border: 1px solid #c4b5fd;
    border-radius: 999px;
}
.mismatch-orbit::before,
.mismatch-orbit::after,
.mismatch-orbit span,
.mismatch-orbit i,
.mismatch-orbit b {
    content: "";
    position: absolute;
    display: block;
    border-radius: 999px;
}
.mismatch-orbit::before { inset: 24px; border: 1px solid #ddd6fe; }
.mismatch-orbit::after { inset: 54px; background: #7c3aed; box-shadow: 0 0 0 12px rgba(124, 58, 237, 0.10); }
.mismatch-orbit span { width: 12px; height: 12px; background: #8b5cf6; top: 18px; left: 44px; }
.mismatch-orbit i { width: 9px; height: 9px; background: #c4b5fd; bottom: 27px; right: 24px; }
.mismatch-orbit b { width: 7px; height: 7px; background: #a78bfa; top: 82px; right: -4px; }
@media (max-width: 640px) {
    .mismatch-page { padding-left: 1rem; padding-right: 1rem; }
    .mismatch-card { border-radius: 1.5rem; }
    .mismatch-orbit { width: 150px; height: 150px; }
    .mismatch-orbit::before { inset: 19px; }
    .mismatch-orbit::after { inset: 43px; }
}